6.3.9 移动、缩放和旋转网页中的正方形
在使用画布元素<canvas>绘制图形时，有时需要对已绘制完成的图形进行移动、缩放和旋转等操作，这些操作可以借助Canvas API中提供的方法来实现。通过调用Canvas API中提供的方法，可以将多个图形以不同的方式结合在一起展示，还可以通过增加阴影属性值为图形添加不同方向的阴影效果。
下面通过一个实例讲解移动、缩放和旋转网页中的正方形的方法。
在本实例中新建了一个<canvas>元素，当页面被加载时在画布中绘制一个正方形。并创建三个<span>标记，将内容分别设置为“移动”、“缩放”、“旋转”；当单击某个<span>标记时对画布中已绘制的正方形进行相应的操作。实例文件10.html的代码如下。
脚本文件js10.js的实现代码如下。
执行后的效果如图6-10所示。
图6-10 执行效果
