HTML5的畫布：Paths

一喵嗚發表於2015-08-06
HTML

HTML5的畫布路徑是一系列的點與點之間的繪圖指令。例如，一系列的點用線在它們之間，或者與它們之間的電弧。

路徑用來繪製多種型別的形狀（線，圓，多邊形等）的HTML5畫布上的，所以要理解這個核心概念是很重要的。

開始和關閉路徑

路徑開始和結束時使用的2D上下文函式呼叫beginPath（）和closePath（） ，就像這樣：

var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");

context.beginPath();

//... path drawing operations

context.closePath();

moveTo()

當使用一個路徑圖，使用的是虛擬的“筆”或“指標”。這個虛擬指標總是位於在一些點。移動虛擬指標是通過使用2D上下文功能 MOVETO（X，Y） ，就像這樣：

context.moveTo(10,10);

lineTo()

context.beginPath();

context.moveTo(10,10);
context.lineTo(50,50);

context.closePath();

stroke() + fill()

context.beginPath();
context.moveTo(10,10);
context.lineTo(60,50);
context.lineTo(110,50);
context.lineTo(10,10);
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(100,10);
context.lineTo(150,50);
context.lineTo(200,50);
context.lineTo(100,10);
context.fill();
context.closePath();

Line Width

context.lineWidth = 10;
這裡繪製的1,5和10的線寬三行：


Line Cape

  • butt
  • round
  • square
 

它可以是一個有點難以看到繪製一個線之間的差值的linecap 的價值對接和廣場。因此，我建立了使用線對的幾個例子對接和廣場，拉近彼此，所以你可以看到其中的差別。頂部或左側線正在使用的對接，和底部或行權使用方。

正如你可以看到，使用該行的linecap價值廣場有一個額外的矩形在最後得出，這使該行時間稍長。

行加入

該lineJoin的2D背景的屬性定義了點如何繪製兩條直線連線。當兩個線連線的點被稱為“線路連線”。該lineJoin屬性可以具有以下值：

  • miter
  • bevel 
  • round 

這裡有三個程式碼示例設定線條連線：

context.lineJoin =“miter”; 
context.lineJoin =“bevel”; 
context.lineJoin =“round ”;


這裡有三個例子顯示lineJoin的取值miter，bevel 和round 。


arc()

The 2D Context function arc() draws an arc on the canvas.

該arc（）函式有6個引數：

  • X：圓弧的中心點的x座標。
  • Y：y座標圓弧的中心點。
  • radius：圓弧的半徑。
  • startAngle：弧度從該圓弧開始角。
  • endAngle：在電弧結束於該弧度角。
  • anticlockwise：設定化弧線的方向  false順時針 true為逆時針

下面是一個程式碼示例：

context.lineWidth = 3; 

VAR X = 50; 
VAR Y = 50; 
VAR radius= 25; 
VAR startAngle =（Math.PI / 180）* 45; 
VAR endAngle =（Math.PI / 180）* 90; 
VAR anticlockwise = false; 

context.beginPath（）; 
context.arc（X，Y，radius，startAngle，endAngle，anticlockwise）; 
context.stroke（）; 
context.closePath（）;

此程式碼示例繪製一個圓弧的中心點，在50，50，25畫素，從45度開始，並一直持續到180度的半徑。打算從0到360度轉換為弧度，你可能已經注意到了。

下面是程式碼例子看起來在畫布上繪製時：


下面是相同的程式碼示例，但與逆時針設定為真：


畫出一個完整的圓，簡單的設定由startAngle到0和 endAngle至 2 * Math.PI其等於（Math.PI / 180）* 360。 

包含arcTo（）

二維上下文有一個包含arcTo（）函式，但它的能力可以使用模仿了lineTo（）和弧（） ，所以我會跳過它。

到quadraticCurveTo（）

在到quadraticCurveTo（）函式繪製二次貝塞爾曲線從一點到另一點。該曲線是由一個單一的控制點來控制。下面是一個程式碼示例：

context.lineWidth = 3; 

VAR fromX = 50; 
VAR fromY = 50; 
VAR TOX = 100; 
VAR TOY = 50; 
VAR CPX = 75; 
VAR CPY = 100; 

context.beginPath（）; 
context.moveTo（fromX，fromY） ; 
context.quadraticCurveTo（CPX，CPY，TOX，TOY）; 
context.stroke（）; 
context.closePath（）;

使用控制點75，100（CPX，CPY）此程式碼示例繪製一條曲線，從50，50至100，50。由此產生的曲線是這樣的：


在畫布上的小圓點是我得出了有控制點。它不是曲線的一部分正常。

bezierCurveTo（）

該bezierCurveTo（）函式繪製三次Bezier曲線從一個點另一個。三次貝塞爾曲線有2個控制點，而二次貝塞爾曲線只有1控制點。下面是一個程式碼示例：

context.lineWidth = 3; 

VAR fromX = 50; 
VAR fromY = 50; 
VAR TOX = 300; 
VAR TOY = 50; 
VAR cp1X = 100; 
VAR cp1Y = 100; 
VAR cp2X = 250; 
VAR cp2Y = 100; 

context.beginPath（ ）; 
context.moveTo（fromX，fromY）; 
context.bezierCurveTo（cp1X，cp1Y，cp2X，cp2Y，TOX，TOY）; 
context.stroke（）; 
context.closePath（）;

使用控制點此程式碼示例繪製一條曲線，從50，50至300，50 100，100（cp1X，cp1Y）和250，100（cp2X，cp2Y）。由此產生的曲線是這樣的：

 

在畫布上的兩個小點是，我已經吸引到你展示他們在哪裡的控制點。它們不繪製為曲線的一部分。

下面是使用不同的開始點，結束點和控制點不同的例子：

context.lineWidth = 3; 

VAR fromX = 50; 
VAR fromY = 50; 
VAR TOX = 300; 
VAR TOY = 50; 
VAR cp1X = 100; 
VAR cp1Y = 10; 
VAR cp2X = 250; 
VAR cp2Y = 100; 

context.beginPath（ ）; 
context.moveTo（fromX，fromY）; 
context.bezierCurveTo（cp1X，cp1Y，cp2X，cp2Y，TOX，TOY）; 
context.stroke（）; 
context.closePath（）;

這裡是相應的曲線：


此外，兩個小點是，我已經明確地呈現的控制點。


相關文章