3：繪制路徑

###canvas繪制路徑

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

???????

###步驟

??????? 1.首先，你需要創建路徑起始點。

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

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

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

???????

###繪制三角形

??????? beginPath()

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

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

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

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

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

???????

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

???????????????? 將筆觸移動到指定的坐標x以及y上

???????????????? 當canvas初始化或者beginPath()調用后，你通常會使用moveTo()函數設置起點

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

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

???????????????? 將筆觸移動到指定的坐標x以及y上

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

???????

??????? closePath()

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

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

???????????????? 如果圖形是已經閉合了的，即當前點為開始點，該函數什么也不做

???????????????????????? 當你調用fill()函數時，所有沒有閉合的形狀都會自動閉合，所以你不需要調用closePath()函數。

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

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

??????? stroke()

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

???????????????? 不會自動調用closePath()

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

??????? fill()

???????????????? 通過填充路徑的內容區域生成實心的圖形。

???????????????? 自動調用closePath()

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

###繪制矩形

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

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

???????????????? 當該方法執行的時候，moveTo()方法自動設置坐標參數（0,0）。

???????????????? 也就是說，當前筆觸自動重置會默認坐標

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

###lineCap

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

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

???????????????? butt? :線段末端以方形結束。

???????????????? round :線段末端以圓形結束

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

??????? 默認值是 butt。

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

###save

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

???????

??????? 保存到棧中的繪制狀態有下面部分組成：

???????????????? 當前的變換矩陣。

???????????????? 當前的剪切區域。

???????????????? 當前的虛線列表.

???????????????? 以下屬性當前的值：

strokeStyle,

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

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

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

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

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

###restore

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

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

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

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

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

????????????????????????????????? //關于樣式的設置

????????????????????????????????? //save? restore成對出現

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

????????????????????????????????? //關于路徑

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

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

????????????????????????????????? //關于樣式的設置

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

????????????????????????????????? //關于路徑

????????????????????????????????? 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：繪制一條二次貝塞爾曲線：//根據三個點確定弧線，不需要具體的半徑，需要經過起始點和終點。

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();

轉載于:https://www.cnblogs.com/love-life-insist/p/9136582.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。