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 不平铺

 

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


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
电话:010-56253825
邮箱:info@atguigu.com
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

 深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)