Canvas入门（一）

八、边框样式：

 

我们还可以通过通过代码来设置边框的样式，让绘制的图形更好看。

//连接起点，闭合路径 context.closePath(); //加宽线条 context.lineWidth = 4; //平滑路径的接合点 context.lineJoin = 'round'; //将颜色改为绿色 context.strokeStyle = 'green'; //绘制当前路径 context.stroke();

设置这些属性可以改变以后要绘制的图形的外观，这个外观起码可以保持到我们将context恢复到上一个状态。

首先，我们将线条宽度加粗到4像素。

其次，我们将lineJoin属性设置为round，主要用来修改连接方式，是拐角变的更加圆滑。

最后，通过strokeStyle属性改变了线条的颜色。

九、填充颜色：

 

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

// 将填充颜色设置为绿色并填充树冠 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的作用是清除矩形区域的所有内容并将它恢复到初始状态，即透明色。

 

 

本教程由尚硅谷教育大数据研究院出品，如需转载请注明来源。