画布旋转——HTML5之特效

translate.html内容如下：

(function(){var canvas=null,context=null,angle=0;function resetCanvas(){canvas=document.getElementById("simple");canvas.width=window.innerWidth;canvas.height=window.innerHeight;context=canvas.getContext("2d");}function animate(){context.save();try{//清除画布context.clearRect(0, 0, canvas.width, canvas.height);//设置原点context.translate(canvas.width * 0.5, canvas.height * 0.5);//旋转角度context.rotate(angle);//设置填充颜色context.fillStyle = "#FF0000";//绘制矩形context.fillRect(-30, -30, 60, 60);angle += 0.05 * Math.PI;}finally{context.restore();}}$(window).bind("resize",resetCanvas).bind("reorient",resetCanvas);$(document).ready(function(){window.scrollTo(0,1);resetCanvas();setInterval(animate,40);});})();

用支持HMTL5的浏览器打开translate.html就可以看到一个旋转的红色方块