topical media & game development

talk show tell print

graphic-canvas-example-panorama-scroller.js / js



  var img = new Image();
  
  //User Variables
  img.src = 'yosemite.jpg';
  var CanvasXSize = 800;
  var CanvasYSize = 200;
  var speed = 30; //lower is faster
  var scale = 1.05;
  var y = -4.5; //vertical offset
  //End User Variables
  
  var dx = 0.75;
  var imgW = img.width*scale;
  var imgH = img.height*scale;
  var x = 0;
  if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger then canvas
  var clearX
  var clearY
  if (imgW > CanvasXSize) { clearX = imgW; } // image larger then canvas
  else { clearX = CanvasXSize; }
  if (imgH > CanvasYSize) { clearY = imgH; } // image larger then canvas
  else { clearY = CanvasYSize; }
  var ctx;
  
  function init() {
      //Get Canvas Element
      ctx = document.getElementById('canvas').getContext('2d');
      //Set Refresh Rate
      return setInterval(draw, speed);
  }
  
  function draw() {
      //Clear Canvas
      ctx.clearRect(0,0,clearX,clearY);
      //If image is <= Canvas Size
      if (imgW <= CanvasXSize) {
          //reset, start from beginning
          if (x > (CanvasXSize)) { x = 0; }
          //draw aditional image
          if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
      }
      //If image is > Canvas Size
      else {
          //reset, start from beginning
          if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }
          //draw aditional image
          if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
      }
      //draw image
      ctx.drawImage(img,x,y,imgW,imgH);
      //amount to move
      x += dx;
  }
  
  


(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.