Canvas入门（二）

发布日期：2018-09-20 作者：atguigu 3211人浏览

十三、背景图

虽然直接绘制图片有很多用处，但一些情况下，像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 不平铺

本教程由尚硅谷教育大数据研究院出品，如需转载请注明来源，欢迎大家关注尚硅谷公众号（atguigu）了解更多。