首頁 > web前端 > H5教程 > HTML5 Canvas-用路徑描畫線條實例介紹_html5教學技巧

HTML5 Canvas-用路徑描畫線條實例介紹_html5教學技巧

WBOY
發布: 2016-05-16 15:49:32
原創
1808 人瀏覽過
原文:
http://www.lifelaf.com/blog/?p=371
本文翻譯自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “Using Paths to Create Lines ”

對於HTML5 Canvas,我們可以使用「路徑」來描畫任何圖形。路徑,簡單來說就是一系列的點以及連接這些點的線。任何Canvas上下文只會有一個“目前路徑”,而當context.save()呼叫時,該“目前路徑”並不會被儲存。

路徑的開始與結束

呼叫beginPath()可以開始一個路徑,而呼叫closePath()則會令該路徑結束。如果連接路徑中的點,那麼這種連接就構成了一個「子路徑」。如果「子路徑」中最後一個點與其自身的第一個點相連,我們就認為該「子路徑」是「閉合」的。

線條的描繪

最基本的路徑操作由重複呼叫moveTo()和lineTo()指令組成。例如以下這個例子:

複製程式碼
程式碼如下:
{
context.strokeStyle = "black";
context.lineWidth = 10;
context.lineCap = 'square';
context.beginPath();
context.moveTo(20, 0);
context.lineTo(100, 0);
context.stroke();
context.closePath();
}

在上面的範例中,我們描畫了一條水平的、寬度為10個像素的線段;同時,我們也設定了lineCap與strokeStyle屬性。以下是一些常用的屬性清單:

lineCap
lineCap定義了在Canvas中線段兩頭的樣式,可設定為以下三個值中的一個:

butt。預設值;在線段的兩頭添加平直邊緣。
round。在線段的兩頭各添加一個半圓形線帽。線帽直徑等於線段的寬度。
square。在線段的兩頭添加正方形線帽。線帽邊長等於線段的寬度。
lineJoin
lineJoin定義了兩條線段相交處的彎角樣式。以下為三個可選的值:

miter。預設值;建立一個尖角。可以透過設定miterLimit屬性來對尖角長度進行限制 — miterLimit為尖角長度和線條寬度之比的最大值,預設為10。
bevel。建立一個斜角。
round。建立一個圓角。
lineWidth
lineWidth定義了線條的粗細,預設為1.0。

strokeStyle
strokeStyle定義了用於渲染線條的顏色等樣式。


翻譯:當lineJoin設定為miter,但是尖角長度超過了miterLimit的限制時,Canvas將顯示「bevel」彎角效果。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板