Canvas入门(一)

九、填充颜色

 

不仅可以设置边框,而且也可以为松树图形内部设置颜色:

// 将填充颜色设置为绿色并填充树冠

context.fillStyle=”#339900″;

context.fill();

首先,我们将fillStyle属性设置成合适的颜色。然后,只要调用context的fill函数就可以让canvas对当前图形中所有的闭合路径内部的像素点进行填充。

绘制树干:

每棵树都有一个强壮的树干。我们可以使用fillRect函数画出树干。

//将填充颜色设为棕色

context.fillStyle = ‘#663300’;

//填充用于做树干的矩形区域

context.fillRect(-5,-50,10,50);

上边的代码我们将颜色设置为了棕色,不过不一样的是我们不用lineTo功能显示树干的边角,而是使用fillRect一步到位画出整个树干。调用fillRect并设置x,y两个位置参数和宽度,高度两个大小参数,随后,canvas会马上使用当前样式进行填充。注意这两行代码要在stroke()方法之前调用。

虽然例子中没用用到但与之相关的函数还有stokeRect和clearRect。storeRect的作用是基于给出的位置和坐标画出矩形的轮廓,clearRect的作用是清除矩形区域的所有内容并将它恢复到初始状态,即透明色。

 

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


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

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

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