Canvas入门（二）

十三、背景图

虽然直接绘制图片有很多用处，但一些情况下，像CSS那样直接使用图片作为背景也非常有用。我们已经了解了如何使用加粗的颜色描边和填充。在描边和填充的时候，canvas还支持图片平铺。

现在我们把林荫小路变得崎岖一点。这次不再对曲线跑道进行描边，而是使用背景图片填充的方法。现在我们将小路设置为一个石头路面。

//加载图像 var grevel = new Image(); grevel.src = "3.jpg"; //用棕色的粗线条来绘制路径 //context.strokeStyle = '#663300';        //使用图像替换棕色线条 context.strokeStyle = context.createPattern(grevel,'repeat'); context.lineWidth = 20 ; context.stroke();

从代码中可以看出，绘制的时候还是使用stroke()函数，只不过这次我们先设置了context上的strokeStyle属性，把调用context.createPattern的返回值赋给该属性。context.createPattern的第二个参数是重复性标记，有如下可选值：

repeat双方向平铺（默认值），repeat-x 横向平铺

repeat-y 纵向平铺 no-repeat 不平铺

十四、缩放canvas

 

还有一种需求就是同样一个树在页面中可能需要出现多次，现在我们来解决这个问题，我们把代码中用于绘制树的操作独立出来，当做一个单例的历程，称为drawTree。如下：绘制树对象的函数

//创建树对象绘制函数，以便重用 function drawTree(context){