對(duì)于有夠前端基礎(chǔ)的小伙伴們來說學(xué)習(xí)一門新的語言我們可以更快速的了解,那么今天我們就來說說:“html5中canvas學(xué)習(xí)路線分享! ”這方面的相關(guān)內(nèi)容!
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)行描邊或填充,也可以描邊加填充這樣圖形才能顯示出來。
Canvas中的三種繪制方式:
繪制一條線段
Canvas繪圖環(huán)境中,線段也是基于路徑繪制的,稱為線性路徑,創(chuàng)建線性路徑的方法:moveTO()與lineTo(),在創(chuàng)建路徑之后調(diào)用stroke()方法,才能在Canvas中畫出線段出來。
這就是前面我們所說的基于路徑的繪制方法,必須對(duì)其進(jìn)行描邊或者填充;
通常兩點(diǎn)連一線因此繪制線段非常簡(jiǎn)單,通過moveTO()指定線的起點(diǎn),通過lineTo()移動(dòng)到另一個(gè)點(diǎn)。
function drawLine(){
cxt.moveTo(50, 50);
cxt.lineTo(100, 100);
}
然而這樣我們?cè)诋嫴贾惺强床灰娋€段的,前面我們說到基于路徑的繪制方法,必須要描邊或者填充。所以要想看到結(jié)果,我們必須還要使用stroke()方法。
因此我們把方法修改成下面這樣就會(huì)繪制出一條線段
function drawLine(){
cxt.moveTo(50, 50);
cxt.lineTo(200, 200);
cxt.stroke();
}
我們只使用lineTo()也是能在畫布中繪制出線段的,我們把上面的代碼改成如下面所示,效果也是一樣的
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)前路徑中沒有子路徑,那么這個(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中的三種繪制方式中我們可以看出,第二行的弧形路徑是開放路徑,最后一行的弧形是封閉路徑。那么封閉的路徑是怎么實(shí)現(xiàn)的呢?
下面我們來看看canvas中路徑繪制中兩個(gè)比較重要的方法
- beginPath(): 清除當(dāng)前所有子路徑,以此來重置當(dāng)前路徑,重新規(guī)劃一條路徑。
- closePath(): 用于封閉某段開放路徑。不是必需的,如果圖形是已經(jīng)閉合了的,即當(dāng)前點(diǎn)為開始點(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è)诋嫴贾欣L制了兩條路徑
注意:調(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í),所有沒有閉合的形狀都會(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()方法不起作用。
線段與像素邊界
先來看一個(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像素,但是上面的線段畫出的卻是兩像素。
如果你在某2個(gè)像素的邊界處繪制一條1像素寬的線段,那么該線段實(shí)際會(huì)占據(jù)2個(gè)像素的寬度;
因?yàn)楫?dāng)你在像素邊界處繪制一條1像素寬度的垂直線段時(shí),canvas的繪圖環(huán)境對(duì)象會(huì)試著將半個(gè)像素畫在邊界中線的右邊,將另外半個(gè)像素畫在邊界中線的左邊。
然而,在一個(gè)整像素的范圍內(nèi)繪制半個(gè)像素寬的線段是不可能的,所以在左右兩個(gè)方向上的半個(gè)像素都被擴(kuò)展為1個(gè)像素。
另外一方面,繪制在兩個(gè)像素之間,這樣的話,中線左右兩端的那半個(gè)像素就不會(huì)延伸,它們結(jié)合起來恰好占據(jù)1個(gè)像素的寬度。所以說,如果要繪制一條真正1像素寬度的線段,你必須將該線段繪制在某兩個(gè)像素之間
網(wǎng)格的繪制
既然我們已經(jīng)明白了如何繪制真正的1像素的線段,那我們就開始繪制網(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è)像素之間的像素上,而且繪制出來的線段僅有0.5像素寬,
雖說canvas規(guī)范沒有明文規(guī)定,不過所有瀏覽器的Canvas實(shí)現(xiàn)都使用了“抗鋸齒”技術(shù),以便創(chuàng)建出“亞像素”線段的繪制效果來
總結(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)指出并多多交流。
以上就是小編今天要分享的“html5中canvas學(xué)習(xí)路線分享! ”相關(guān)內(nèi)容,當(dāng)然如果你有其他的看法也可以和小編一同分享,更多有關(guān)于這方面的內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解!