我們能用HTML5 Canvas做什么?
來(lái)源:領(lǐng)眾品牌 查看次數(shù): 發(fā)表時(shí)間:2013-05-28 17:44:31最近在國(guó)外問(wèn)答網(wǎng)站Quora上,許多開(kāi)發(fā)者對(duì)于HTML5 Canvas元素的實(shí)用性進(jìn)行了一系列探討。Canvas非常靈活,能夠很好地融合JavaScript代碼并在瀏覽器內(nèi)繪制華麗的圖形。Canvas究竟具體能做些什么?3D3R公司創(chuàng)始人兼CEO Ohad Eder-Pressman的答案十分精彩,我們對(duì)其文字進(jìn)行了翻譯和整理,不妨一起來(lái)看一看。
圖:用Canvas繪制的圖形
什么是Canvas?
Canvas元素是HTML5的一部分,允許腳本語(yǔ)言動(dòng)態(tài)渲染位圖像。Canvas由一個(gè)可繪制地區(qū)HTML代碼中的屬性定義決定高度和寬度。JavaScript代碼可以訪(fǎng)問(wèn)該地區(qū),通過(guò)一套完整的繪圖功能類(lèi)似于其他通用二維的API,從而生成動(dòng)態(tài)的圖形。
Ohad Eder-Pressman
我們能用Canvas做些什么?
1. 游戲:毫無(wú)疑問(wèn),游戲在HTML5領(lǐng)域具有舉足輕重的地位。HTML5在基于Web的圖像顯示方面比Flash更加立體、更加精巧,Ohad認(rèn)為運(yùn)用Canvas制作的圖像能夠令HTML5游戲在流暢度和跨平臺(tái)方面發(fā)揮更大的潛力。
2. 圖表制作:圖表制作時(shí)常被人們忽略,但無(wú)論企業(yè)內(nèi)部還是企業(yè)間交流合作都離不開(kāi)圖表?,F(xiàn)在一些開(kāi)發(fā)者使用HTML/CSS完成圖標(biāo)制作,但Ohad認(rèn)為大家完全可以用Canvas來(lái)實(shí)現(xiàn)。當(dāng)然,使用SVG(可縮放矢量圖形)來(lái)完成圖表制作也是非常好的方法。
3. banner廣告:Flash曾經(jīng)輝煌的時(shí)代,智能手機(jī)還未曾出現(xiàn)?,F(xiàn)在以及未來(lái)的智能機(jī)時(shí)代,HTML5技術(shù)能夠在banner廣告上發(fā)揮巨大作用,用Canvas實(shí)現(xiàn)動(dòng)態(tài)的廣告效果再合適不過(guò)。
4. 模擬器:Ohad認(rèn)為,無(wú)論從視覺(jué)效果還是核心功能方面來(lái)說(shuō),模擬器產(chǎn)品可以完全由JavaScript來(lái)實(shí)現(xiàn)。
5. 遠(yuǎn)程計(jì)算機(jī)控制:Canvas可以讓開(kāi)發(fā)者更好地實(shí)現(xiàn)基于Web的數(shù)據(jù)傳輸,構(gòu)建一個(gè)完美的可視化控制界面。
6. 字體設(shè)計(jì):對(duì)于字體的自定義渲染將完全可以基于Web,使用HTML5技術(shù)進(jìn)行實(shí)現(xiàn)。
7. 圖形編輯器:Ohad預(yù)測(cè),圖形編輯器將能夠100%基于Web實(shí)現(xiàn)。
8. 其他可嵌入網(wǎng)站的內(nèi)容:類(lèi)似圖表、音頻、視頻,還有許多元素能夠更好地與Web融合,并且不需要任何插件。Ohad呼吁大家繼續(xù)挖掘Canvas的潛力,運(yùn)用HTML5技術(shù)創(chuàng)造更多價(jià)值。
作者:一名
12年資深網(wǎng)站設(shè)計(jì)師 前端交互開(kāi)發(fā)工程師