canvas应用示例

function init(){    buildSpinner({ x : 50, y : 50, size : 20, degrees : 15 });}function buildSpinner(data) {    var canvas = document.createElement('canvas');  canvas.height = 100;  canvas.width = 300;  document.getElementsByTagName('div')[0].appendChild(canvas);  var ctx = canvas.getContext("2d"),    i = 0, degrees = data.degrees, loops = 0, degreesList = [];      for (i = 0; i < degrees; i++) {    degreesList.push(i);  }    // reset  i = 0;    // so I can kill it later  window.canvasTimer = setInterval(draw, 5000/degrees);    function reset() {      ctx.clearRect(0,0,100,100); // clear canvas        var left = degreesList.slice(0, 1);    var right = degreesList.slice(1, degreesList.length);    degreesList = right.concat(left);  }  function draw() {    var c, s, e;    var d = 0;    if (i == 0) {      reset();    }    ctx.save();    d = degreesList[i];    c = Math.floor(255/degrees*i);    ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';    ctx.lineWidth = data.size ;    ctx.beginPath();    s = Math.floor(360/degrees*(d));    e = Math.floor(360/degrees*(d+1)) - 1;       ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);    ctx.stroke();    ctx.restore();    i++;    if (i >= degrees) {      i = 0;    }  }  }