国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 開(kāi)發(fā) > HTML5 > 正文

canvas學(xué)習(xí)總結(jié)三之繪制路徑-線段

2024-09-05 07:22:48
字體:
來(lái)源:轉(zhuǎn)載
供稿:網(wǎng)友

Canvas繪圖環(huán)境中有些屬于立即繪制圖形方法,有些繪圖方法是基于路徑的。

立即繪制圖形方法僅有兩個(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()的用法

  • moveTo(x,y): 將筆觸移動(dòng)到指定的坐標(biāo)x以及y上,向當(dāng)前路徑中增加一條子路徑,該方法不會(huì)清除當(dāng)前路徑中的任何子路徑。
  • lineTo(x,y): 繪制一條從當(dāng)前位置到指定x以及y位置的直線,如果當(dāng)前路徑中沒(méi)有子路徑,那么這個(gè)方法的行為與moveTo()一樣。如果當(dāng)前路徑中存在子路徑,此方法會(huì)將你所指定的這個(gè)點(diǎn)加入子路徑中。

改變線段的樣式

改變線段的寬度

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è)比較重要的方法

  • beginPath(): 清除當(dāng)前所有子路徑,以此來(lái)重置當(dāng)前路徑,重新規(guī)劃一條路徑。
  • closePath(): 用于封閉某段開(kāi)放路徑。不是必需的,如果圖形是已經(jīng)閉合了的,即當(dāng)前點(diǎn)為開(kāi)始點(diǎn),該函數(shù)什么也不做。

先繪制出一條折線

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

修改上面例子中的代碼在代碼中添加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();}

可以看出我們?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像素線寬的線段。

對(duì)canvas繪制圖形感興趣的同學(xué),請(qǐng)持續(xù)關(guān)注后續(xù)更新,如有不對(duì)的地方也請(qǐng)指出并多多交流。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。

發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 灵寿县| 济宁市| 溧阳市| 区。| 历史| 和顺县| 宁陕县| 丰镇市| 蓝田县| 郎溪县| 白玉县| 雷州市| 广丰县| 楚雄市| 蓝田县| 大埔县| 荔浦县| 沾化县| 九龙城区| 宁蒗| 丹棱县| 满洲里市| 香河县| 资阳市| 乐安县| 兴隆县| 石屏县| 松阳县| 曲麻莱县| 永川市| 崇阳县| 区。| 昆明市| 青海省| 射阳县| 正蓝旗| 安庆市| 福海县| 南通市| 电白县| 聂荣县|