topical media & game development
graphic-canvas-example-sky-world.js / js
var skyWorld = document.createElement('div');
skyWorld.setAttribute('id','skyWorld');
var skyCanvas = document.createElement('canvas')
skyCanvas.setAttribute('id','canvas');
skyCanvas.setAttribute('height','60');
skyCanvas.setAttribute('width','468');
skyWorld.appendChild(skyCanvas)
document.write(skyWorld.innerHTML);
var lingrad;
var groundgrad;
var radgrad4;
function init(){
draw()
}
function skyColor(ctx,hr){
var theColor
switch(hr){
case 0:
case 1:
case 2:
case 3:
case 4: case 22: case 23: case 24: theColor = "black"; break;
case 5: case 21: theColor = "midnightblue"; break;
case 6: case 20: theColor = "navy"; break;
case 7: case 19: theColor = "darkblue"; break;
case 18: theColor = "#8E388E"; break;
case 17: theColor = "#9932CC"; break;
default: theColor = "lightskyblue";
}
// Create gradients
lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, theColor);
lingrad.addColorStop(0.5, '#fff');
lingrad.addColorStop(0.5, '#66CC00');
lingrad.addColorStop(1, '#fff');
groundgrad = ctx.createLinearGradient(0,15,0,80);
groundgrad.addColorStop(0,'darkgreen')
groundgrad.addColorStop(1,'lightgreen')
}
function draw(){
var ctx = document.getElementById('canvas').getContext('2d');
var curdate = new Date();
var hours = curdate.getHours()
skyColor(ctx,hours)
ctx.fillStyle = lingrad;
ctx.fillRect(0,0,468,60);
ctx.fillStyle = groundgrad;
ctx.fillRect(0,30,468,30)
ctx.save()
ctx.fillStyle = "#63B8FF"
ctx.scale(7,1)
ctx.beginPath();
ctx.arc(50,40.5,5,0,Math.PI*2,true);
ctx.fill();
ctx.restore()
window.setTimeout("draw()",3600000)
}
init();
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.