從上個(gè)星期開始，耳朵就一直在生病，里面長(zhǎng)了個(gè)疙瘩，腫的一碰就疼，不能吃飯不能嗨 (┳＿┳)……在此提醒各位小伙伴，最近天氣炎熱，一定要注意防暑上火，病來(lái)如山倒呀~
接下來(lái)我正在喝著5塊一顆的藥學(xué)習(xí)canvas……
canvas（畫布）是html5新增的標(biāo)簽元素，用來(lái)定義圖形，比如圖表和其他圖像。<canvas>標(biāo)簽只是圖形容器，必須使用腳本（通常為javascript）來(lái)繪制圖形。
canvas與svg的區(qū)別
canvas是HTML5提供的新元素<canvas>，而svg存在的歷史要比canvas久遠(yuǎn)，已經(jīng)有十幾年了。svg并不是html5專有的標(biāo)簽，最初svg是用xml技術(shù)（超文本擴(kuò)展語(yǔ)言，可以自定義標(biāo)簽或?qū)傩裕┟枋龆S圖形的語(yǔ)言。
首先，從它們的功能上來(lái)講，canvas可以看做是一個(gè)畫布。其繪制出來(lái)的圖形為標(biāo)量圖，因此，可以在canvas中引入jpg或png這類格式的圖片，在實(shí)際開發(fā)中，大型的網(wǎng)絡(luò)游戲都是用canvas畫布做出來(lái)的，并且canvas的技術(shù)現(xiàn)在已經(jīng)相當(dāng)?shù)某墒臁?
另外，我們喜歡用canvas來(lái)做一些統(tǒng)計(jì)用的圖表，如柱狀圖曲線圖或餅狀圖等。而svg，所繪制的圖形為矢量圖，所以其用法上受到了限制。因?yàn)橹荒芾L制矢量圖，所以svg中不能引入普通的圖片，因?yàn)槭噶繄D的不會(huì)失真的效果，在項(xiàng)目中我們會(huì)用來(lái)做一些動(dòng)態(tài)的小圖標(biāo)。
但是由于其本質(zhì)為矢量圖，可以被無(wú)限放大而不會(huì)失真，這很適合被用來(lái)做地圖，而百度地圖就是用svg技術(shù)做出來(lái)的。
另外從技術(shù)發(fā)面來(lái)講canvas里面繪制的圖形不能被引擎抓取，如我們要讓canvas里面的一個(gè)圖片跟隨鼠標(biāo)事件：canvas.onmouseover=function(){}。而svg里面的圖形可以被引擎抓取，支持事件的綁定。
另外canvas中我們繪制圖形通常是通過(guò)JavaScript來(lái)實(shí)現(xiàn)，svg更多的是通過(guò)標(biāo)簽來(lái)來(lái)實(shí)現(xiàn)，如在svg中繪制正矩形形就要用<rect>，這里我們不能用屬性style="width:XXX;height:XXX;"來(lái)定義。
我再來(lái)介紹一個(gè)svg的js庫(kù)：TWO.JS。其中包含two.js和three.js前者用于繪制二維圖形，后者用于繪制三維圖形。TWO.JS可以支持三種格式，svg（默認(rèn)）、canvas、和WEBGL。當(dāng)然也可以在普通div中引入。
要從同一圖形的一個(gè)<canvas>標(biāo)記中移除元素，需要擦掉重新繪制；而svg很容易編輯，只要從其描述中移除元素即可。
以上是之前在別人博客中看到的，所以先引用過(guò)來(lái)，待之后熟練掌握canvas，svg再寫自己的心得體會(huì)。
具體請(qǐng)參考 http://blog.csdn.net/helloword_chen/article/details/49788309 |
網(wǎng)友評(píng)論
