<p>// 树干中间偏左的位置颜色要谈一些
trunkGradient.addColorStop(0.4, ‘#996600’);</p>
<p>// 右侧边缘的颜色要深一些
trunkGradient.addColorStop(1, ‘#552200’);</p>
<p>// 使用渐变填充树干
context.fillStyle = trunkGradient;
context.fillRect(-5, -50, 10, 50);
// 创建垂直渐变，以用树冠在树干上的投影
var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
// 投影渐变的起点是透明度为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值增加而增加，借助拉伸变换，
