topical media & game development

talk show tell print

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.