详解通过HTML5 Canvas实现图片的平移及旋转变化的方法

context.fillRect(0,0,800,600);

for(var i = 0; i <= 12; i++){

context.save(); context.translate(70 + i * 50, 50 + i * 40);

context.fillStyle = "#00AAAA"; context.fillRect(0,0,20,20);

context.restore();

context.save(); context.translate(70 + i * 50, 50 + i * 40);

context.rotate(i * 30 * Math.PI / 180); context.fillStyle = "red";

context.fillRect(0,0,20,20); context.restore();

}

}; </script>

</body> </html>

运行结果：
2016322113132491.jpg (850×500)

这里用for循环绘制了14对正方形，其中蓝色是旋转前的正方形，红色是旋转后的正方形。每次旋转都以正方形左上角顶点为原点进行旋转。每次绘制都被save()与restore()包裹起来，每次旋转前都移动了坐标系。童鞋们可以自己动动手，实践一下，就能体会到旋转变换的奥妙了。