html5 Canvas畫(huà)圖教程(1)—畫(huà)圖的基本常識(shí)_HTML5教程
推薦:HTML5本地存儲(chǔ)之Web Storage應(yīng)用介紹Web Storage是HTML5引入的一個(gè)非常重要的功能,可以在客戶端本地存儲(chǔ)數(shù)據(jù),類(lèi)似HTML4的cookie,但可實(shí)現(xiàn)功能要比cookie強(qiáng)大的多,cookie大小被限制在4KB,Web Storage官方建議為每個(gè)網(wǎng)站5MB,感興趣的朋友可以了解下
雖然大家都稱(chēng)Canvas為HTML5/">html5的新標(biāo)簽,看起來(lái)好像Canvas屬于html語(yǔ)言的新知識(shí),但其實(shí)Canvas畫(huà)圖是通過(guò)javascript來(lái)做的。所以,如果你想學(xué)習(xí)Canvas畫(huà)圖,你必須要有Javascript基礎(chǔ)。另外,畫(huà)圖嘛,總有一些圖像方面的術(shù)語(yǔ)和知識(shí)點(diǎn),所以如果你有過(guò)做圖或美工經(jīng)驗(yàn),學(xué)習(xí)Canvas會(huì)更容易。
Canvas,意為畫(huà)布也。而Html5中的Canvas也真的跟現(xiàn)實(shí)生活中的畫(huà)布非常相似。所以,把他看成一塊實(shí)實(shí)在在的畫(huà)布可以加快理解。
畫(huà)布
用canvas作畫(huà),首先,你需要有一塊“畫(huà)布”。如果你的書(shū)架里面沒(méi)有畫(huà)布,你可以買(mǎi)一卷回來(lái)放進(jìn)去。當(dāng)然,在網(wǎng)頁(yè)里面我們不需要花錢(qián)買(mǎi),直接寫(xiě)一個(gè)canvas即可,類(lèi)似:
復(fù)制代碼 代碼如下:m.dounai2.com
<canvas id="cvs" width="800" height="600">你的瀏覽器不支持canvas</canvas>
其中標(biāo)簽里面的文字是給不支持canvas的瀏覽器看的,支持的永遠(yuǎn)看不到。
這個(gè)畫(huà)布的特性有必要說(shuō)一下,他有兩個(gè)原生的屬性,即width和height.同時(shí),因?yàn)樗彩且粋(gè)html元素,所以他也可以使用css來(lái)定義width和height,但是,千萬(wàn)要注意:他自身的寬高和通過(guò)css定義的寬高是不一樣的!
我們用JS來(lái)改變Canvas的寬高,是這樣的:
復(fù)制代碼 代碼如下:m.dounai2.com
canvas.width= 400
canvas.height = 300
但用JS通過(guò)操作CSS來(lái)改變Canvas的寬高,則是這樣:
復(fù)制代碼 代碼如下:m.dounai2.com
canvas.style.width = '400px'
canvas.style.height = '300px'
看得出來(lái),語(yǔ)法上區(qū)別是很明顯的。實(shí)際上區(qū)別更明顯。
他們的區(qū)別是什么?
比如一塊寬1000的畫(huà)布,你在畫(huà)布左側(cè)畫(huà)了一條豎線,寬100像素。此時(shí)你把畫(huà)布自身的width設(shè)為500,相當(dāng)于把畫(huà)布的右半邊咔嚓掉了,但此時(shí)那豎線的寬度還是100。
但如果你通過(guò)CSS來(lái)把畫(huà)布的寬度變成500,那就相當(dāng)于把畫(huà)布由1000擠壓到500,所以豎線的寬度變成了50.
(這只是理論情況,實(shí)際上設(shè)置canvas的寬度時(shí),他會(huì)清空掉已畫(huà)出來(lái)的內(nèi)容。。)
Canvas自身的寬高就是畫(huà)布本身的屬性,而css給他的寬高則可以看作是縮放,如果你縮放的太過(guò)隨意,那么畫(huà)布上的圖形可能變得你自己都認(rèn)不出來(lái)。
所以有個(gè)建議:除非特殊情況,一定不要用css來(lái)定義Canvas的寬高。
畫(huà)布有了,現(xiàn)在我們把他拿出來(lái):
復(fù)制代碼 代碼如下:m.dounai2.com
var cvs = document.getElementById('cvs');
看,跟獲取其他元素的辦法一模一樣。
畫(huà)筆
現(xiàn)在畫(huà)布已經(jīng)有了,想往上面涂鴉,當(dāng)然還需要一只筆。canvas取得筆的方法如下:
var ctx = cvs.getContext('2d');其中g(shù)etContext方法就是用來(lái)拿筆的,但這里還有個(gè)參數(shù):2d,這是什么意思呢?這個(gè)可以看作是畫(huà)筆的種類(lèi)。
既然有2D,那么就會(huì)有3d了?以后估計(jì)會(huì)有,但現(xiàn)在沒(méi)有。所以我們先用這只2d的筆吧。
那么我們可以多放幾只筆來(lái)備用嗎?答案是不能。
我要問(wèn)一個(gè)問(wèn)題:你畫(huà)圖的時(shí)候是同時(shí)用幾只筆呢?相信99.9%的人都是只能用一只,雖然有些武林高手比如小龍女之類(lèi)的可以?xún)芍皇滞瑫r(shí)畫(huà),但這對(duì)一般人來(lái)說(shuō)很不現(xiàn)實(shí),是不是?
所以現(xiàn)在你可以感到欣慰了,因?yàn)閔tml5的canvas標(biāo)簽也只支持同時(shí)用一支筆!
有的寫(xiě)JS寫(xiě)的比較熟的同學(xué)可能會(huì)想耍個(gè)小聰明:我用前面獲取畫(huà)筆的方法多整幾只筆出來(lái),不就行了?!
比如:
復(fù)制代碼 代碼如下:m.dounai2.com
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。
如果你需要畫(huà)出不同的顏色,辦法就是把這只唯一的“筆”不停的蘸上新顏色。
這其實(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ǔ)概念。
canvas的原點(diǎn)是左上角,跟flash一樣。但蛋疼的是數(shù)學(xué)中的原點(diǎn)是左下角。這個(gè)…只能說(shuō)習(xí)慣就好
一些畫(huà)圖的基本常識(shí)
首先你需要知道,怎樣的坐標(biāo)變化會(huì)畫(huà)出什么線?比如,x坐標(biāo)變大而y坐標(biāo)不變,則能畫(huà)出一條橫線;y坐標(biāo)變化而x坐標(biāo)不變,則是一條豎線。
當(dāng)然,還有斜線,左斜線右斜線什么的,如果能對(duì)照?qǐng)D片,大部分人都能一看即懂;只是用代碼畫(huà)起來(lái)就比較郁悶了,只能靠邏輯思維想出來(lái)。
如果你現(xiàn)在感覺(jué)對(duì)線條一片混沌,也不用擔(dān)心,在學(xué)習(xí)的過(guò)程中自然會(huì)理解。
其他
canvas有一個(gè)和現(xiàn)實(shí)的畫(huà)布不一樣的特點(diǎn)就是,他默認(rèn)是透明的,沒(méi)有背景色。這在大部分時(shí)候非常重要。
分享:html5指南-5.使用web storage存儲(chǔ)鍵值對(duì)的數(shù)據(jù)本節(jié)課的內(nèi)容是介紹web storage,使用它在瀏覽器里存儲(chǔ)鍵值對(duì)的數(shù)據(jù),功能上像以前的cookie一樣,不過(guò)他更好,存儲(chǔ)的數(shù)據(jù)可以更大感興趣的朋友可以了解下哦
相關(guān)HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定:body的介紹
- 關(guān)于HTML5的安全問(wèn)題開(kāi)發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開(kāi)發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫(kù)的SQL語(yǔ)句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略(CSP)簡(jiǎn)介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類(lèi)型和email類(lèi)型簡(jiǎn)介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- HTML5中實(shí)現(xiàn)拖放效果無(wú)須借助javascript
- Javascript 高級(jí)手勢(shì)使用介紹
- HTML5重塑Web世界它將如何改變互聯(lián)網(wǎng)
- HTML4和HTML5之間除了相似以外的10個(gè)主要不同
- html5 跨文檔消息傳輸示例探討
- html5配合css3實(shí)現(xiàn)帶提示文字的輸入框(擺脫js)
- 使用css3 屬性如何豐富圖片樣式(圓角 陰影 漸變)
- html5-websocket基于遠(yuǎn)程方法調(diào)用的數(shù)據(jù)交互實(shí)現(xiàn)
- 使用css如何制作時(shí)間ICON方法實(shí)踐
- html5 button autofocus 屬性介紹及應(yīng)用
- 相關(guān)鏈接:
復(fù)制本頁(yè)鏈接| 搜索html5 Canvas畫(huà)圖教程(1)—畫(huà)圖的基本常識(shí)
- 教程說(shuō)明:
HTML5教程-html5 Canvas畫(huà)圖教程(1)—畫(huà)圖的基本常識(shí)。