HTML5 Canvas——用路徑描畫線條實(shí)例介紹

2020-03-24 18:16:53

字體：大中小

供稿：網(wǎng)友

原文：
http://www.lifelaf.com/blog/?p=371
本文翻譯自Steve Fulton Jeff Fulton HTML5 Canvas, Chapter 2, Using Paths to Create Lines

對(duì)于HTML5 Canvas，我們可以使用路徑來描畫任何圖形。路徑，簡(jiǎn)單來說就是一系列的點(diǎn)以及連接這些點(diǎn)的線。任何Canvas上下文只會(huì)有一個(gè) 當(dāng)前路徑，而當(dāng)context.save()調(diào)用時(shí)，該當(dāng)前路徑并不會(huì)被保存。

路徑的開始與結(jié)束

調(diào)用beginPath()可以開始一個(gè)路徑，而調(diào)用closePath()則會(huì)令該路徑結(jié)束。如果連接路徑中的點(diǎn)，那么這種連接就構(gòu)成了一個(gè) 子路徑。如果子路徑中最后一個(gè)點(diǎn)與其自身的第一個(gè)點(diǎn)相連，我們就認(rèn)為該子路徑是閉合的。

線條的描繪

最基本的路徑操作由反復(fù)調(diào)用moveTo()和lineTo()命令組成。比如以下這個(gè)例子：

復(fù)制代碼代碼如下:
function drawScreen() {
context.strokeStyle = "black";
context.lineWidth = 10;
context.lineCap = 'square';
context.beginPath();
context.moveTo(20, 0);
context.lineTo(100, 0);
context.stroke();
context.closePath();
}

在上面的例子中，我們描畫了一條水平的、寬度為10個(gè)像素的線段；與此同時(shí)，我們還設(shè)定了lineCap與strokeStyle屬性。以下是一些常用的屬性列表：

lineCap
lineCap定義了在Canvas中線段兩頭的樣式，可設(shè)置為以下三個(gè)值中的一個(gè)：

butt。默認(rèn)值；在線段的兩頭添加平直邊緣。
round。在線段的兩頭各添加一個(gè)半圓形線帽。線帽直徑等于線段的寬度。
square。在線段的兩頭添加正方形線帽。線帽邊長(zhǎng)等于線段的寬度。
lineJoin
lineJoin定義了兩條線段相交處的彎角樣式。以下為三個(gè)可選的值：

miter。默認(rèn)值；創(chuàng)建一個(gè)尖角。可以通過設(shè)置miterLimit屬性來對(duì)尖角長(zhǎng)度進(jìn)行限制 miterLimit為尖角長(zhǎng)度和線條寬度之比的最大值，默認(rèn)為10。
bevel。創(chuàng)建一個(gè)斜角。
round。創(chuàng)建一個(gè)圓角。
lineWidth
lineWidth定義了線條的粗細(xì)，默認(rèn)為1.0。

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

譯注：當(dāng)lineJoin設(shè)定為miter，但是尖角長(zhǎng)度超過了miterLimit的限制時(shí)，Canvas將顯示 bevel 彎角效果。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML5的新特性(1)

下一篇：HTML5自定義data-- data(obj)屬性和jquery的data()方法的使用