如何繪制路徑-線段

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

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

使用這些繪制系統(tǒng)時(shí)，你需要先定義一個(gè)路徑，然后再對(duì)其進(jìn)行描邊或填充，也可以描邊加填充這樣圖形才能顯示出來(lái)。

Canvas中的三種繪制方式：

繪制一條線段

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

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

通常兩點(diǎn)連一線因此繪制線段非常簡(jiǎn)單，通過(guò)moveTO()指定線的起點(diǎn)，通過(guò)lineTo()移動(dòng)到另一個(gè)點(diǎn)。

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

然而這樣我們?cè)诋?huà)布中是看不見(jiàn)線段的，前面我們說(shuō)到基于路徑的繪制方法，必須要描邊或者填充。所以要想看到結(jié)果，我們必須還要使用stroke()方法。

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

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

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

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

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

改變線段的樣式

改變線段的寬度

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

改變線段的顏色

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

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

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

beginPath()與closePath()

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

下面我們來(lái)看看canvas中路徑繪制中兩個(gè)比較重要的方法

先繪制出一條折線

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

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

cxt.strokeStyle = 'green'= 250, 5050, 150150, 150150, 250　　cxt.closePath();

}

可以看出我們?cè)诋?huà)布中繪制了兩條路徑

注意：調(diào)用beginPath()之后，或者canvas剛建的時(shí)候，第一條路徑構(gòu)造命令通常被視為是moveTo（）。所以我們?cè)诶L制圖形的時(shí)候一定要先使用beginPath()。

我們繼續(xù)修改我們的代碼

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

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

注意：當(dāng)你調(diào)用fill()函數(shù)時(shí)，所有沒(méi)有閉合的形狀都會(huì)自動(dòng)閉合，所以此時(shí)closePath()函數(shù)不是必須的。

但是調(diào)用stroke()：如果你在stroke()方法之前只用closePath()會(huì)形成閉合路徑，如果在stroke()方法之后調(diào)用closePath()方法，此時(shí)圖形已經(jīng)繪制完成，當(dāng)前的繪制路徑已經(jīng)關(guān)閉，所以closePath()方法不起作用。

線段與像素邊界

先來(lái)看一個(gè)例子

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

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

如果你在某2個(gè)像素的邊界處繪制一條1像素寬的線段，那么該線段實(shí)際會(huì)占據(jù)2個(gè)像素的寬度；

因?yàn)楫?dāng)你在像素邊界處繪制一條1像素寬度的垂直線段時(shí)，canvas的繪圖環(huán)境對(duì)象會(huì)試著將半個(gè)像素畫(huà)在邊界中線的右邊，將另外半個(gè)像素畫(huà)在邊界中線的左邊。

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

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

網(wǎng)格的繪制

既然我們已經(jīng)明白了如何繪制真正的1像素的線段，那我們就開(kāi)始繪制網(wǎng)格

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

上面例子中我們將線段繪制在兩個(gè)像素之間的像素上，而且繪制出來(lái)的線段僅有0.5像素寬，

雖說(shuō)canvas規(guī)范沒(méi)有明文規(guī)定，不過(guò)所有瀏覽器的Canvas實(shí)現(xiàn)都使用了“抗鋸齒”技術(shù)，以便創(chuàng)建出“亞像素”線段的繪制效果來(lái)

總結(jié)

本節(jié)內(nèi)容主要講解canvas中路徑中線性路徑的繪制方法，主要是利用 moveTo()定義起點(diǎn)，lineTo()定義終點(diǎn)，stroke()描繪當(dāng)前路徑。這三個(gè)方法繪制線段

canvas中繪制路徑有兩個(gè)重要的方法，beginPath()與closePath()。繪制圖形之前先調(diào)用beginPath()是繪制多個(gè)圖形必要的步驟。

closePath()在使用fill()時(shí)是可以省略的，而且還要注意closePath()方法的調(diào)用位置。

繪制線段時(shí)我們可以使用 lineWidth改變線段的寬度，strokeStyle改變線段的顏色。

弄清楚線段的像素邊界，這樣我們才能繪制出真正的1像素線寬的線段。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:0731-84117792 E-MAIL:11247931@qq.com