HTML5 使用canvas API 描边样式

如果开发人员只能绘制直线，而且只能使用黑色，那么HTML5 canvas API就不会如此强大和流行了。所以现在使用描边样式让树冠看起来更像是树吧。

【例题】描边样式

代码如下：

// 加宽线条

context.lineWidth = 4;

// 平滑路径的接合点

context.lineJoin = 'round';

// 将颜色改成棕色

context.strokeStyle = '#663300';

// 最后，绘制树冠

context.stroke()；

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

    首先，将线条宽度加粗到3像素。

    接着，将lineJoin属性设置为round，这是修改当前形状中线段的连接方式，让拐角变得更圆滑；也可以把lineJoin属性设置成bevel或者miter(相应的context.miterLimit值也需要调整）以变换拐角样式。

    最后，通过strokeStyle属性改变了线条的颜色。在这个例子中，使用了CSS值来设置颜色，不过在后面将看到，strokeStyle的值还可以用于生成特殊效果的图案或者渐变色。

    还有一个没有用到的属性——lineCap,可以把它的值设置为butt、square或者round,以此来指定线条末端的样式。