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

  
            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>  

运行结果：

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