HTML 5旋轉範例

好久沒有寫文章了，最近開始研究 HTML 5 的寫法，所以就寫了一個sample。
以前想要在非 IE 瀏覽器上做旋轉的動作，是件難事，
直到 HTML 5 的出現，即解決這個窘境
底下這個 sample 主要是要實作 HTML 5 旋轉 (rotate) 功能，在一個畫布(canvas)底下，
如何描繪一個矩形並旋轉

var i = 1;
function supports_canvas() {
  return !!document.createElement('canvas').getContext;
}
function init(){
  if(supports_canvas()){
    move();
	setInterval(move, 200);
  }
}
function move(){
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.save();
  ctx.clearRect(0, 0, 400, 400);
  ctx.translate(150, 150);
  ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
  if(i/2<18){
  	ctx.rotate(Math.PI/(18/i));
  }else{
  	ctx.rotate(Math.PI/(18/(i-36)));
  }
  ctx.beginPath();
  ctx.strokeRect(0, 0, 100, 100);
  ctx.restore();
  document.getElementById("disp").innerHTML = i;
  i = i % 36 + 1;
}