一. canvas api 的scale() 函数用于缩放.
scale() 带有两个参数，分别代表在x, y 两个维度的值， 每个参数在 canvas 显示图像的时候， 向其传递在本方向轴上图像要放大(或缩小) 的量， 如果x为2, 就代表所绘制图像中全部元素都会变成两倍宽， 如果y 值为0.5 ,绘制出来的图像全部元素都会变成之前的一半高。
例如以下程序很方便地在canvas 上创建出新的树.
缩放示例
二. 旋转 context.rotate(angle), 参数angle 以弧度为单位
立即学习“前端免费学习笔记（深入）”；
看代码
旋转示例
以上两个示例，需要注意之处：
始终在原点执行图形和路径的变换操作
示例中演示了为什么要在原点执行图形和路径的变换 操作, 执行完后再统一平移. 因为缩放 scale 和旋转 rotate 等变换操作都是针对原点进行的.
如果对一个不在原点的图形进行旋转， 那么图形绕着原点旋转而不是在原地旋转。 类似地，如果进行缩放操作时没有将图形放置到合适的坐标上，那么所有坐标都会被同时缩放, 新的坐标可能会超出canvas 范围。
三. 创建阴影
以下示例，演示如何对路径坐标进行随意变换， 以从根本上改变现在树的路径显示，最终创建一个阴影效果。 相关代码：
变换阴影
分析这种变换背后的数学含义， 可以看出通过调整与Y轴值相对应的参数改变了X轴的值， 这样做是为了拉伸出一查灰色的树做阴影。 接下来， 我们按照60% 的比例将剪裁出的树缩小到了合适的尺寸。
剪裁过的 “阴影” 树会先被显示出来， 这样一来， 真正的树就会按照Z轴(canvas 中对象的重叠顺序) 显示在阴影的上面。 此外树影的填充用到了CSS 的RGBA特性， 通过特性我们将透明度值设为正常情况下的20%, 至此，带有半透明效果的树影就做好了。
示例中用到图片 gravel.jpg 在之前博文可找到.
以上就是HTML5之7 __Canvas: 缩放、旋转、创建阴影的内容，更多相关内容请关注PHP中文网（www.php.cn）！
