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）了解更多。