十三、背景图
虽然直接绘制图片有很多用处，但一些情况下，像CSS那样直接使用图片作为背景也非常有用。我们已经了解了如何使用加粗的颜色描边和填充。在描边和填充的时候，canvas还支持图片平铺。
现在我们把林荫小路变得崎岖一点。这次不再对曲线跑道进行描边，而是使用背景图片填充的方法。现在我们将小路设置为一个石头路面。
| //加载图像 var grevel = new Image(); grevel.src = "3.jpg"; //用棕色的粗线条来绘制路径 //context.strokeStyle = '#663300';
//使用图像替换棕色线条 context.strokeStyle = context.createPattern(grevel,'repeat');
扫描二维码关注公众号，回复：
4154075 查看本文章
context.lineWidth = 20 ; context.stroke(); |
从代码中可以看出，绘制的时候还是使用stroke()函数，只不过这次我们先设置了context上的strokeStyle属性，把调用context.createPattern的返回值赋给该属性。context.createPattern的第二个参数是重复性标记，有如下可选值：
repeat双方向平铺（默认值），repeat-x 横向平铺
repeat-y 纵向平铺 no-repeat 不平铺
十四、缩放canvas
还有一种需求就是同样一个树在页面中可能需要出现多次，现在我们来解决这个问题，我们把代码中用于绘制树的操作独立出来，当做一个单例的历程，称为drawTree。如下：绘制树对象的函数
| //创建树对象绘制函数，以便重用 function drawTree(context){ //创建用作树干纹理的三阶水平渐变 var trunkGradient = context.createLinearGradient(-5,-50,5,-50); //树干的左侧边缘是一般程度的棕色 trunkGradient.addColorStop(0,'#663300'); //树干中间偏左的位置颜色要淡一些 trunkGradient.addColorStop(0.4,"#996600"); //树干右侧边缘的颜色要深一些 trunkGradient.addColorStop(1,'#552200'); //使用渐变填充树干 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)'); //在树干上填充投影渐变 context.fillStyle = canopyShadow; context.fillRect(-5,-50,10,50);
context.beginPath(); context.moveTo(-25,-50); context.lineTo(-10,-80); context.lineTo(-20,-80); context.lineTo(-5,-110); context.lineTo(-15,-110); //树的顶点 context.lineTo(0,-140); context.lineTo(15,-110); context.lineTo(5,-110); context.lineTo(20,-80); context.lineTo(10,-80); context.lineTo(25,-50); //连接起点，闭合路径 context.closePath(); //加宽线条 context.lineWidth = 4; //平滑路径的接合点 context.lineJoin = 'round'; //将颜色改为绿色 context.strokeStyle = 'green'; context.stroke();
// 将填充颜色设置为绿色并填充树冠 context.fillStyle="#339900"; context.fill(); } |
可以看到，drawTree函数包括了之前绘制树冠、树干和树干渐变的所有代码。为了在新位置画出大一点的树，我们将使用另一种变换方式——缩放函数context.scale，如下：
| //在130，250的位置绘制第一课树 context.save(); context.translate(130,250); drawTree(context); context.restore();
//在260，500的位置绘制第二棵树 context.save(); context.translate(260,500);
//将第二棵树的宽和高分别放大至原来的2倍 context.scale(2,2); drawTree(context); context.restore(); |
scale函数带有两个参数类分别代表在x，y两个维度的值。每个参数在canvas显示图像的时候，向其传递在本方向轴上图像要放到（或者缩小）的量。如果x值为2，就代表所绘制图形中全部元素都会变成两倍宽，如果y值为0.5，绘制出来的图像都会变成之前的一半高。
十五、Canvas变换：
变换操作并不限于缩放和平移，我们可以使用函数context.rotate(angle)来旋转图像，甚至直接修改底册变换矩阵以完成一些高级操作，如裁剪图像的绘制路径。以下代码在修改了原有创建树图像的方法，为树增加了倒影：
| //创建用作树干纹理的三阶水平渐变 var trunkGradient = context.createLinearGradient(-5,-50,5,-50); //保存当前状态 context.save();
//x值随着y值的增加而增加，借助拉伸变换可以创建一课用作阴影的倾斜的树 //应用了变换以后所有坐标都与矩阵相乘 context.transform(1,0,-0.5,1,0,0);
//在y轴方向，将阴影的高度压缩为原来的60% context.scale(1,0.6);
//使用透明度为20%的黑色填充树干 context.fillStyle = "rgba(0,0,0,0.2)"; context.fillRect(-5,-50,10,50);
//使用已有的印象效果重新绘制树 //createCanopyPath将创建树冠的方法从新封装，已方便复用 createCanopyPath(context); context.fill();
//恢复之前的状态 context.restore(); |
效果：
本教程由尚硅谷教育大数据研究院出品，如需转载请注明来源。