// 投影渐变的起点是透明度为50%的黑色
canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
// 方向垂直向下，渐变在很短的距离内迅速渐变到完全透明，这段长度之外
//的树干上没有投影
canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');</p>
<p>// 在树干上填充投影渐变
context.fillStyle = canopyShadow;
context.fillRect(-5, -50, 10, 50);
背景图
// 加载图片
var gravel = new Image();
gravel.src = "gravel.jpg";
gravel.onload = function () {
drawTrails();
}</p>
<p>// 用背景图替代棕色粗线条
context.strokeStyle = context.createPattern(gravel, 'repeat');
context.lineWidth = 20;
context.stroke();
context.createPattern的第二个参数是重复性标记，可以在表2-1中选择合适的值。
| 平铺方式 |
意义 |
| repeat |
(默认值)图片会在两个方向平铺 |
| repeat-x |
横向平铺 |
| repeat-y |
纵向平铺 |
| no-repeat |
图片只显示一次，不平铺 |
缩放
缩放函数context.scale(x,y)：x,y分别代表在x,y两个维度的值。每个参数在canvas显示图像的时候，向其传递在本方向轴上图像要放大(或缩小)的量。如果x值为2，就代表所绘制图像中全部元素会变成两倍宽，如果y值为0。5，绘制出来的图像会变成之前的一半高。
// 在 X=130, Y=250 处绘制第一棵树
context.save();
context.translate(130, 250);
drawTree(context);
context.restore();</p>
<p>// 在 X=260, Y=500 处绘制第二棵树
context.save();
context.translate(260, 500);</p>
<p>// 将第二棵树的高宽放大到原来的2倍
context.scale(2, 2);
drawTree(context);
context.restore();
旋转
旋转图像
context.save();
//旋转角度参数以弧度为单位
context.rotate(1.57);
context.drawImage(myImage, 0, 0, 100, 100);</p>
<p>context.restore();
一种变换的使用方法
// 保存当前状态
context.save();</p>
<p>// X值随着Y值增加而增加，借助拉伸变换，
// 可以创建一棵用作阴影的倾斜的树
// 应用了变换以后，所有坐标都与矩阵相乘
