html5 canvas 畫圖教程案例分析

2020-03-24 16:52:02

字體：大中小

供稿：網(wǎng)友

雖然大家都稱Canvas為html5的新標(biāo)簽，看起來(lái)好像Canvas屬于html語(yǔ)言的新知識(shí)，但其實(shí)Canvas畫圖是通過(guò)javascript來(lái)做的。所以，如果你想學(xué)習(xí)Canvas畫圖，你必須要有Javascript基礎(chǔ)。
另外，畫圖嘛，總有一些圖像方面的術(shù)語(yǔ)和知識(shí)點(diǎn)，所以如果你有過(guò)做圖或美工經(jīng)驗(yàn)，學(xué)習(xí)Canvas會(huì)更容易。
Canvas，意為畫布也。而Html5中的Canvas也真的跟現(xiàn)實(shí)生活中的畫布非常相似。所以，把他看成一塊實(shí)實(shí)在在的畫布可以加快理解。

畫布
用canvas作畫，首先，你需要有一塊畫布。如果你的書架里面沒(méi)有畫布，你可以買一卷回來(lái)放進(jìn)去。當(dāng)然，在網(wǎng)頁(yè)里面我們不需要花錢買，直接寫一個(gè)canvas即可，類似：

復(fù)制代碼代碼如下:
canvas id="cvs" width="800" height="600" 你的瀏覽器不支持canvas /canvas

其中標(biāo)簽里面的文字是給不支持canvas的瀏覽器看的，支持的永遠(yuǎn)看不到。

注意：這個(gè)畫布的特性有必要說(shuō)一下，他和IMG一樣，有兩個(gè)原生的屬性，即width和height.同時(shí)，因?yàn)樗彩且粋€(gè)html元素，所以他也可以使用css來(lái)定義width和height，但是，千萬(wàn)要注意：他自身的寬高和通過(guò)css定義的寬高是不一樣的！
我們用JS來(lái)改變Canvas的原生寬高，是這樣的：

復(fù)制代碼代碼如下:
canvas.width= 400
canvas.height = 300

但用JS通過(guò)操作CSS來(lái)改變Canvas的寬高，則是這樣：

復(fù)制代碼代碼如下:
canvas.style.width = '400px'
canvas.style.height = '300px'

看得出來(lái)，語(yǔ)法上區(qū)別是很明顯的。實(shí)際上區(qū)別更明顯。
他們的區(qū)別是什么？
比如一塊寬1000的畫布，你在畫布左側(cè)畫了一條豎線，寬100像素。此時(shí)你把畫布自身的width設(shè)為500，相當(dāng)于把畫布的右半邊咔嚓掉了，但此時(shí)那豎線的寬度還是100。
但如果你通過(guò)CSS來(lái)把畫布的寬度變成500，那就相當(dāng)于把畫布由1000擠壓到500，所以豎線的寬度變成了50.
(這只是理論情況，實(shí)際上設(shè)置canvas的原生寬度時(shí)，他會(huì)清空掉已畫出來(lái)的內(nèi)容。。)
Canvas自身的寬高就是畫布本身的屬性，而css給他的寬高則可以看作是縮放，如果你縮放的太過(guò)隨意，那么畫布上的圖形可能變得你自己都認(rèn)不出來(lái)。
所以有個(gè)建議：除非特殊情況，一定不要用css來(lái)定義Canvas的寬高。
畫布有了，現(xiàn)在我們把他拿出來(lái)：

復(fù)制代碼代碼如下:
var cvs = document.getElementById('cvs');

看，跟獲取其他元素的辦法一模一樣。

畫筆
現(xiàn)在畫布已經(jīng)有了，想往上面涂鴉，當(dāng)然還需要一只筆。canvas取得筆的方法如下：

復(fù)制代碼代碼如下:
var ctx = cvs.getContext('2d');

其中g(shù)etContext方法就是用來(lái)拿筆的，但這里還有個(gè)參數(shù):2d，這是什么意思呢?這個(gè)可以看作是畫筆的種類。
既然有2D，那么就會(huì)有3d了？以后估計(jì)會(huì)有，但現(xiàn)在沒(méi)有。所以我們先用這只2d的筆吧。
!那么我們可以多放幾只筆來(lái)備用嗎？答案是不能。
我要問(wèn)一個(gè)問(wèn)題：你畫圖的時(shí)候是同時(shí)用幾只筆呢？相信99.9%的人都是只能用一只，雖然有些武林高手比如小龍女之類的可以兩只手同時(shí)畫，但這對(duì)一般人來(lái)說(shuō)很不現(xiàn)實(shí)，是不是？
所以現(xiàn)在你可以感到欣慰了，因?yàn)閔tml5的canvas標(biāo)簽也只支持同時(shí)用一支筆！
有的寫JS寫的比較熟的同學(xué)可能會(huì)想耍個(gè)小聰明：我用前面獲取畫筆的方法多整幾只筆出來(lái)，不就行了？！

比如：

復(fù)制代碼代碼如下:
var con = cvs.getContext('2d');
var ctx = cvs.getContext('2d');

哈哈哈哈，好像成功了，在沒(méi)測(cè)試之前我也是這么想的，但，其實(shí)這只是一個(gè)幻覺(jué)！
因?yàn)槲野l(fā)現(xiàn)，我把其中一支筆蘸上紅墨水，另外一支筆也自動(dòng)蘸上了紅墨水！因?yàn)閮芍ЧP是一體的！fuck。
如果你需要畫出不同的顏色，辦法就是把這只唯一的筆不停的蘸上新顏色。
這其實(shí)不是一個(gè)優(yōu)點(diǎn)，是個(gè)缺陷，以后你會(huì)體會(huì)到的。

坐標(biāo)
2d世界，就是平面，在一個(gè)平面上確定一個(gè)點(diǎn)，需要兩個(gè)值，x坐標(biāo)和y坐標(biāo)。這是一個(gè)很重要的基礎(chǔ)概念,不過(guò)由于大家都學(xué)過(guò)數(shù)學(xué)我也就不多講了。
canvas的原點(diǎn)是左上角，跟flash一樣。但蛋疼的是數(shù)學(xué)中的原點(diǎn)是左下角。這個(gè) 只能說(shuō)習(xí)慣就好

其他
canvas有一個(gè)和現(xiàn)實(shí)的畫布不一樣的特點(diǎn)就是，他默認(rèn)是透明的，沒(méi)有背景色。這在大部分時(shí)候非常重要。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：X-HTML5 和 XHTML3

下一篇：XHTML入門學(xué)習(xí)教程-文字格式與特殊字符