canvas學習總結三之繪制路徑-線段

2024-08-26 00:21:19

字體：大中小

來源：轉載

供稿：網友

Canvas繪圖環境中有些屬于立即繪制圖形方法，有些繪圖方法是基于路徑的。

立即繪制圖形方法僅有兩個strokeRect(),fillRect(),雖然strokezText(),fillText()方法也是立即繪制的，但是文本不算是圖形。

基于路徑的繪制系統

大多數繪制系統，如：SVG(Scalable Verctor Graphics, 可縮放的矢量圖形)，Adobe Illustrator等，都是基于路徑的，

使用這些繪制系統時，你需要先定義一個路徑，然后再對其進行描邊或填充，也可以描邊加填充這樣圖形才能顯示出來。

Canvas中的三種繪制方式：

繪制一條線段

Canvas繪圖環境中，線段也是基于路徑繪制的，稱為線性路徑，創建線性路徑的方法：moveTO()與lineTo()，在創建路徑之后調用stroke()方法，才能在Canvas中畫出線段出來。

這就是前面我們所說的基于路徑的繪制方法，必須對其進行描邊或者填充；

通常兩點連一線因此繪制線段非常簡單，通過moveTO()指定線的起點，通過lineTo()移動到另一個點。

function drawLine(){    cxt.moveTo(50, 50);    cxt.lineTo(100, 100);}

然而這樣我們在畫布中是看不見線段的，前面我們說到基于路徑的繪制方法，必須要描邊或者填充。所以要想看到結果，我們必須還要使用stroke()方法。

因此我們把方法修改成下面這樣就會繪制出一條線段

function drawLine(){    cxt.moveTo(50, 50);    cxt.lineTo(200, 200);    cxt.stroke();}

canvas,繪制路徑,線段

我們只使用lineTo()也是能在畫布中繪制出線段的，我們把上面的代碼改成如下面所示，效果也是一樣的

function drawLine(){    cxt.lineTo(50, 50);    cxt.lineTo(200, 200);    cxt.stroke();}

總結下moveTo()與lineTo()的用法

moveTo(x,y): 將筆觸移動到指定的坐標x以及y上，向當前路徑中增加一條子路徑，該方法不會清除當前路徑中的任何子路徑。
lineTo(x,y): 繪制一條從當前位置到指定x以及y位置的直線，如果當前路徑中沒有子路徑，那么這個方法的行為與moveTo()一樣。如果當前路徑中存在子路徑，此方法會將你所指定的這個點加入子路徑中。

改變線段的樣式

改變線段的寬度

function= 14;    cxt.lineTo(50, 50);    cxt.lineTo(200, 200);    cxt.stroke();}

canvas,繪制路徑,線段

改變線段的顏色

function drawLine(){    cxt.lineWidth = 14;    cxt.strokeStyle = 'green';    cxt.lineTo(50, 50);    cxt.lineTo(200, 200);    cxt.stroke();}

canvas,繪制路徑,線段

我們還可以利用CanvasGradient對象或者CanvasPattern對象給線段添加漸變色或圖案

function drawLine(){    cxt.lineWidth = 14;    var gradient = cxt.createLinearGradient(0, 0, canvas.width/2, canvas.height/2);    gradient.addColorStop(0, 'blue');    gradient.addColorStop(0.5, 'purple');    gradient.addColorStop(1, 'yellow');    cxt.strokeStyle = gradient;    cxt.lineTo(50, 50);    cxt.lineTo(200, 200);    cxt.stroke();}

canvas,繪制路徑,線段

beginPath()與closePath()

從上面canvas中的三種繪制方式中我們可以看出，第二行的弧形路徑是開放路徑，最后一行的弧形是封閉路徑。那么封閉的路徑是怎么實現的呢？

下面我們來看看canvas中路徑繪制中兩個比較重要的方法

beginPath(): 清除當前所有子路徑，以此來重置當前路徑，重新規劃一條路徑。
closePath(): 用于封閉某段開放路徑。不是必需的，如果圖形是已經閉合了的，即當前點為開始點，該函數什么也不做。

先繪制出一條折線

function drawLine(){    cxt.strokeStyle = 'green';    cxt.lineWidth = 2;    cxt.moveTo(50, 50);    cxt.lineTo(50, 150);    cxt.lineTo(150, 150);    cxt.stroke();}

canvas,繪制路徑,線段

修改上面例子中的代碼在代碼中添加beginPath()與closePath()方法

function drawLine(){    //描邊三角形    cxt.strokeStyle = 'green';    cxt.lineWidth = 2;    cxt.beginPath();    cxt.moveTo(50, 50);    cxt.lineTo(50, 150);    cxt.stroke();    cxt.beginPath();    cxt.lineTo(150, 150);    cxt.lineTo(150, 250);    cxt.stroke();　　cxt.closePath();}

canvas,繪制路徑,線段

可以看出我們在畫布中繪制了兩條路徑

注意：調用beginPath()之后，或者canvas剛建的時候，第一條路徑構造命令通常被視為是moveTo（）。所以我們在繪制圖形的時候一定要先使用beginPath()。

我們繼續修改我們的代碼

function drawLine(){    //描邊三角形    cxt.strokeStyle = 'green';    cxt.lineWidth = 2;    cxt.beginPath();    cxt.moveTo(50, 50);    cxt.lineTo(50, 150);    cxt.lineTo(150, 150);    cxt.closePath();    cxt.stroke();    //折線    cxt.translate(150, 0);    cxt.strokeStyle = 'red';    cxt.lineWidth = 2;    cxt.beginPath();    cxt.moveTo(50, 50);    cxt.lineTo(50, 150);    cxt.lineTo(150, 150);    cxt.stroke();    cxt.closePath();    //綠色填充三角形    cxt.translate(150, 0);    cxt.fillStyle = 'green';    cxt.lineWidth = 2;    cxt.beginPath();    cxt.moveTo(50, 50);    cxt.lineTo(50, 150);    cxt.lineTo(150, 150);    cxt.fill();    cxt.closePath();    //紅色填充三角形    cxt.translate(150, 0);    cxt.fillStyle = 'red';    cxt.lineWidth = 2;    cxt.beginPath();    cxt.moveTo(50, 50);    cxt.lineTo(50, 150);    cxt.lineTo(150, 150);    cxt.closePath();    cxt.fill();}

canvas,繪制路徑,線段

從上面的例子我們可以看出closePath()的位置不同，也會影響我們的圖形

注意：當你調用fill()函數時，所有沒有閉合的形狀都會自動閉合，所以此時closePath()函數不是必須的。

但是調用stroke()：如果你在stroke()方法之前只用closePath()會形成閉合路徑，如果在stroke()方法之后調用closePath()方法，此時圖形已經繪制完成，當前的繪制路徑已經關閉，所以closePath()方法不起作用。

線段與像素邊界

先來看一個例子

function drawLine(){    //描邊三角形    cxt.lineWidth = 1;    cxt.beginPath();    cxt.moveTo(50, 50);    cxt.lineTo(450, 50);    cxt.stroke();    cxt.beginPath();    cxt.moveTo(50.5, 150.5);    cxt.lineTo(450.5, 150.5);    cxt.stroke();}

canvas,繪制路徑,線段

從圖中我們可以看出，我們將兩條線段的lineWidth都是設置為1像素，但是上面的線段畫出的卻是兩像素。

如果你在某2個像素的邊界處繪制一條1像素寬的線段，那么該線段實際會占據2個像素的寬度；

因為當你在像素邊界處繪制一條1像素寬度的垂直線段時，canvas的繪圖環境對象會試著將半個像素畫在邊界中線的右邊，將另外半個像素畫在邊界中線的左邊。

然而，在一個整像素的范圍內繪制半個像素寬的線段是不可能的，所以在左右兩個方向上的半個像素都被擴展為1個像素。

另外一方面，繪制在兩個像素之間，這樣的話，中線左右兩端的那半個像素就不會延伸，它們結合起來恰好占據1個像素的寬度。所以說，如果要繪制一條真正1像素寬度的線段，你必須將該線段繪制在某兩個像素之間

canvas,繪制路徑,線段

網格的繪制

既然我們已經明白了如何繪制真正的1像素的線段，那我們就開始繪制網格

function drawLine(stepx, stepy){    cxt.lineWidth = 0.5;    cxt.strokeStyle = 'green';    //繪制豎線    for(var i= stepx + 0.5; i< cxt.canvas.width; i+= stepx){        cxt.beginPath();        cxt.moveTo(i, 0);        cxt.lineTo(i, cxt.canvas.height);        cxt.stroke();    }    //繪制橫線    for(var i= stepy + 0.5; i< cxt.canvas.height; i+= stepy){        cxt.beginPath();        cxt.moveTo(0, i);        cxt.lineTo(cxt.canvas.width, i);        cxt.stroke();    }}drawLine(10, 10);

canvas,繪制路徑,線段