3：繪制路徑

###canvas繪制路徑

??????? 圖形的基本元素是路徑。路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合。

???????

###步驟

??????? 1.首先，你需要創(chuàng)建路徑起始點。

??????? 2.然后你使用畫圖命令去畫出路徑

??????? 3.之后你把路徑封閉。

??????? 4.一旦路徑生成，你就能通過描邊或填充路徑區(qū)域來渲染圖形。

???????

###繪制三角形

??????? beginPath()

???????????????? 新建一條路徑，生成之后，圖形繪制命令被指向到路徑上準(zhǔn)備生成路徑。

????????????????

???????????????? 生成路徑的第一步叫做beginPath()。本質(zhì)上，路徑是由很多子路徑構(gòu)成，這些子路徑都是在一個列表中，

???????????????? 所有的子路徑（線、弧形、等等）構(gòu)成圖形。而每次這個方法調(diào)用之后，列表清空重置，

???????????????? 然后我們就可以重新繪制新的圖形。

???????

??????? moveTo(x, y)

???????????????? 將筆觸移動到指定的坐標(biāo)x以及y上

???????????????? 當(dāng)canvas初始化或者beginPath()調(diào)用后，你通常會使用moveTo()函數(shù)設(shè)置起點

????????????????

??????? lineTo(x, y)

???????????????? 將筆觸移動到指定的坐標(biāo)x以及y上

???????????????? 繪制一條從當(dāng)前位置到指定x以及y位置的直線。

???????

??????? closePath()

???????????????? 閉合路徑之后圖形繪制命令又重新指向到上下文中。

???????????????????????? 閉合路徑closePath(),不是必需的。這個方法會通過繪制一條從當(dāng)前點到開始點的直線來閉合圖形。

???????????????? 如果圖形是已經(jīng)閉合了的，即當(dāng)前點為開始點，該函數(shù)什么也不做

???????????????????????? 當(dāng)你調(diào)用fill()函數(shù)時，所有沒有閉合的形狀都會自動閉合，所以你不需要調(diào)用closePath()函數(shù)。

???????????????? 但是調(diào)用stroke()時不會自動閉合

????????????????

??????? stroke()

???????????????? 通過線條來繪制圖形輪廓。

???????????????? 不會自動調(diào)用closePath()

????????????????

??????? fill()

???????????????? 通過填充路徑的內(nèi)容區(qū)域生成實心的圖形。

???????????????? 自動調(diào)用closePath()

????????????????

###繪制矩形

??????? rect(x, y, width, height)

???????????????? 繪制一個左上角坐標(biāo)為（x,y），寬高為width以及height的矩形。

???????????????? 當(dāng)該方法執(zhí)行的時候，moveTo()方法自動設(shè)置坐標(biāo)參數(shù)（0,0）。

???????????????? 也就是說，當(dāng)前筆觸自動重置會默認(rèn)坐標(biāo)

????????????????

###lineCap

??????? lineCap 是 Canvas 2D API 指定如何繪制每一條線段末端的屬性。

??????? 有3個可能的值，分別是：

???????????????? butt? :線段末端以方形結(jié)束。

???????????????? round :線段末端以圓形結(jié)束

???????????????? square:線段末端以方形結(jié)束，但是增加了一個寬度和線段相同，高度是線段厚度一半的矩形區(qū)域

??????? 默認(rèn)值是 butt。

????????????????

###save

??????? save() 是 Canvas 2D API 通過將當(dāng)前狀態(tài)放入棧中，保存 canvas 全部狀態(tài)的方法

???????

??????? 保存到棧中的繪制狀態(tài)有下面部分組成：

???????????????? 當(dāng)前的變換矩陣。

???????????????? 當(dāng)前的剪切區(qū)域。

???????????????? 當(dāng)前的虛線列表.

???????????????? 以下屬性當(dāng)前的值：

strokeStyle,

????????????????????????????????????????? ? fillStyle,?

????????????????????????????????????????? ? lineWidth,

????????????????????????????????????????? ? lineCap,

????????????????????????????????????????? ? lineJoin...

????????????????????????????????????????? ?

###restore

??????? restore() 是 Canvas 2D API 通過在繪圖狀態(tài)棧中彈出頂端的狀態(tài)，將 canvas 恢復(fù)到最近的保存狀態(tài)的方法。

??????? 如果沒有保存狀態(tài)，此方法不做任何改變。???

/定義多個路徑的基本模板///

var ctx = canvas.getContext("2d");

????????????????????????????????? ctx.save();

????????????????????????????????? //關(guān)于樣式的設(shè)置

????????????????????????????????? //save? restore成對出現(xiàn)

????????????????????????????????? ctx.beginPath();

????????????????????????????????? //關(guān)于路徑

????????????????????????????????? ctx.restore();

????????????????????????????????? ctx.save();

????????????????????????????????? //關(guān)于樣式的設(shè)置

????????????????????????????????? ctx.beginPath();

????????????????????????????????? //關(guān)于路徑

????????????????????????????????? ctx.fill();

????????????????????????????????? ctx.restore();

4：繪制簽名（實例）

https://github.com/Hightinstance/practice/tree/master/%E7%AD%BE%E5%90%8D

5：繪制曲線（雙曲線，sinx,圓）

1：圓???? var ctx = canvas.getContext("2d");

????????????????????????????????? ctx.beginPath();

????????????????????????????????? ctx.moveTo(100,100);

???????????????????????? ??????? ctx.arc(100,100,50,0,90*Math.PI/180,true); //角度是弧度

????????????????????????????????? ctx.closePath();

????????????????????????????????? ctx.stroke();

2：弧線

?? ? ctx.beginPath();

??????? ctx.moveTo(50,50)

??????? ctx.arcTo(300,0,200,200,50);

??????? ctx.stroke();//兩條切線之間的弧度 需要三個控制點

???

?

?

3：繪制一條二次貝塞爾曲線：//根據(jù)三個點確定弧線，不需要具體的半徑，需要經(jīng)過起始點和終點。

ctx.beginPath();

ctx.moveTo(50,50)

ctx.quadraticCurveTo(300,0,200,200);

ctx.stroke();

//同理

繪制一條三次貝塞爾曲線：

ctx.beginPath();

ctx.moveTo(50,50)

ctx.bezierCurveTo(300,0,0,300,300,300);

ctx.stroke();

轉(zhuǎn)載于:https://www.cnblogs.com/love-life-insist/p/9136582.html

總結(jié)

以上是生活随笔為你收集整理的绘制路径的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。