這篇文章將為大家詳細(xì)講解有關(guān)canvas如何繪制簡(jiǎn)單路徑，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站10多年成都企業(yè)網(wǎng)站定制服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及高端網(wǎng)站定制服務(wù),成都企業(yè)網(wǎng)站定制及推廣,對(duì)軟裝設(shè)計(jì)等多個(gè)領(lǐng)域擁有豐富的網(wǎng)站運(yùn)維經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。

1 線段（直線路徑）

繪制線段一般步驟:

moveTo(x,y) 移動(dòng)畫筆到指定的坐標(biāo)點(diǎn)(x,y)
lineTo(x,y) 使用直線連接當(dāng)前端點(diǎn)和指定的坐標(biāo)點(diǎn)(x,y)
stroke() 根據(jù)當(dāng)前的畫線樣式，繪制當(dāng)前或已經(jīng)存在的路徑

2 矩形路徑

繪制矩形路徑一般步驟:

rect(x, y, width, height) 矩形路徑，坐標(biāo)點(diǎn)(x,y)，width height寬高
stroke()或fill 根據(jù)當(dāng)前的樣式，繪制或填充路徑
也可使用前文提到的strokeRect或fillRect, 或者是通過lineTo拼接成矩形

3 圓弧路徑

先看下繪制圓弧的api:

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

x, y 圓弧中心， radius 圓弧半徑, startAngle 起始點(diǎn), endAngle 圓弧終點(diǎn), anticlockwise 默認(rèn)為順時(shí)針, true逆時(shí)針
CSS中做旋轉(zhuǎn)用到都是角度（deg），但是arc函數(shù)中表示角的單位是弧度，不是角度。角度與弧度的js表達(dá)式: 弧度 = (Math.PI/180) * 角度(deg)。
這里弧度是以x軸正方向?yàn)榛鶞?zhǔn)、默認(rèn)順時(shí)針旋轉(zhuǎn)的角度來計(jì)算

圖示：

(圖片來自大漠)

ctx.beginPath();
ctx.arc(200, 100, 100, 0, Math.PI / 2, false);
ctx.closePath();
ctx.stroke();
ctx.fill();

關(guān)于“canvas如何繪制簡(jiǎn)單路徑”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。