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