HTML5 使用canvas API 描邊樣式

如果開(kāi)發(fā)人員只能繪制直線，而且只能使用黑色，那么HTML5 canvas API就不會(huì)如此強(qiáng)大和流行了。所以現(xiàn)在使用描邊樣式讓樹(shù)冠看起來(lái)更像是樹(shù)吧。

【例題】描邊樣式

代碼如下：

// 加寬線條

context.lineWidth = 4;

// 平滑路徑的接合點(diǎn)

context.lineJoin = 'round';

// 將顏色改成棕色

context.strokeStyle = '#663300';

// 最后，繪制樹(shù)冠

context.stroke()；

    以上代碼屬性，可以改變以后將要繪制的圖形外觀，這個(gè)外觀起碼可以保持到將context恢復(fù)到上一個(gè)狀態(tài)。

    首先，將線條寬度加粗到3像素。

    接著，將lineJoin屬性設(shè)置為round，這是修改當(dāng)前形狀中線段的連接方式，讓拐角變得更圓滑；也可以把lineJoin屬性設(shè)置成bevel或者miter(相應(yīng)的context.miterLimit值也需要調(diào)整）以變換拐角樣式。

    最后，通過(guò)strokeStyle屬性改變了線條的顏色。在這個(gè)例子中，使用了CSS值來(lái)設(shè)置顏色，不過(guò)在后面將看到，strokeStyle的值還可以用于生成特殊效果的圖案或者漸變色。

    還有一個(gè)沒(méi)有用到的屬性——lineCap,可以把它的值設(shè)置為butt、square或者round,以此來(lái)指定線條末端的樣式。