這篇文章主要介紹“HTML5中如何用路徑描畫(huà)線條”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“HTML5中如何用路徑描畫(huà)線條”文章能幫助大家解決問(wèn)題。

成都創(chuàng)新互聯(lián)公司是一家成都網(wǎng)站建設(shè)、成都網(wǎng)站制作，提供網(wǎng)頁(yè)設(shè)計(jì)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，建網(wǎng)站，按需求定制開(kāi)發(fā)，網(wǎng)站開(kāi)發(fā)公司，從2013年開(kāi)始是互聯(lián)行業(yè)建設(shè)者，服務(wù)者。以提升客戶品牌價(jià)值為核心業(yè)務(wù)，全程參與項(xiàng)目的網(wǎng)站策劃設(shè)計(jì)制作，前端開(kāi)發(fā)，后臺(tái)程序制作以及后期項(xiàng)目運(yùn)營(yíng)并提出專(zhuān)業(yè)建議和思路。

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

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

調(diào)用beginPath()可以開(kāi)始一個(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();

}

在上面的例子中，我們描畫(huà)了一條水平的、寬度為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è)尖角。可以通過(guò)設(shè)置miterLimit屬性來(lái)對(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)度超過(guò)了miterLimit的限制時(shí)，Canvas將顯示“bevel”彎角效果。

關(guān)于“HTML5中如何用路徑描畫(huà)線條”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

當(dāng)前文章：HTML5中如何用路徑描畫(huà)線條
文章路徑：http://chinadenli.net/article20/jgjgco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)、軟件開(kāi)發(fā)、網(wǎng)站改版、、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)