HTML5教程(1)-HTML5的Canvas概述

2020-03-24 16:56:00

字體：大中小

來源：轉載

供稿：網友

canvas 是一個新的html' target='_blank'>HTML元素，這個元素可以被Script語言(通常是JavaScript)用來繪制圖形。例如可以用它來畫圖、合成圖象、或做簡單的(和不那么簡單的)動畫。右面的圖象展示了一些 canvas 的應用示例，我們將會在此教程中看到他們的實現。 canvas 最先在蘋果公司(Apple)的Mac OS X Dashboard上被引入，而后被應用于Safari。基于Gecko1.8的瀏覽器，例如Firefox 1.5，也支持這個新元素。元素 canvas 是WhatWG Web applications 1.0也就是大家都知道的HTML 5標準規范的一部分。在本教程中，我將試著講述如何在你自己的網頁中使用 canvas 元素。提供的示例應該會給你些清晰概念，即用 canvas 能做些什么的。這些示例也可作為你應用 canvas 的起點。開始使用之前用元素 canvas 并不難，只要你具有HTML和 JavaScript的基礎知識。如上所述，并不是所有現代瀏覽器都支持 canvas 元素，所以你需要 Firefox 1.5或更新版本、或者其他基于Gecko的瀏覽器例如Opera 9、或者最近版本的Safari才能看到所有示例的動作。 1.Canvas 是甚么？

下面網址可以找到html5 Canvas的完整定義
http://www.whatwg.org/specs/web-apps/current-work/#the-canvas

現在Firefox 2，safari 都直接支持Canvas,IE 需要一個ExCanvas 的js代碼庫轉換。

下面網址可以找到 ExCanvas[此js庫尚未提供對arcto()，clip()的支持，因此基于其上的各種chart組件天然的不能生成pie圖]
http://excanvas.sourceforge.net/

Mozilla的Canvas入門
http://developer.mozilla.org/en/docs/Category:HTML:Canvas

Mininova的Canvas入門
http://labs.mininova.org/canvas/

2.Canvas 能做甚么？

(1)Msx模擬器

It emulates the underlying Z80 CPU, TMS9918 Video Display Processor (VDP), PPI, RAM slots and Megaram. In its present form, it should be able to run any program or game developed for MSX 1.0.

用js模擬Z80等硬件,讀取rom信息，無聲游戲
http://jsmsxdemo.googlepages.com/jsmsx.html

(2)Painter
假如性能允許，發展成Web photo也是可能的事情。
http://caimansys.com/painter/index.html

(3)效果
水波紋
http://timelessname.com/canvas/experiment01/
某個模糊理論視覺模型
http://timelessname.com/canvas/experiment02/

(4)3D

多面體
http://www.polyhedra.org/poly/

3D地圖
Mozilla的例子，RayCaster 就是一個。

Canvascape - 3D walker，比上面例子更完善些，還提供紋理貼圖功能
一個類似CS的界面
http://www.abrahamjoffe.com.au/ben/canvascape/

(5)chart組件

成形的有 WebFx Chart,Flot等，需要可自行搜索。

3.Canvas 的發展

(1)Canvas代碼轉換到flash(porting canvas to flash)
http://team.mixmedia.com/index.php?title=porting_canvas_to_flash more=1 c=1 tb=1 pb=1
(2)支持Canvas的框架

mootools支持Canvas 的調用，并有一個mocha的基于mootools的組件提供一個窗體功能。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML5中的音頻和視頻媒體播放元素小結

下一篇：HTML5中5個簡單實用的API（第二篇，含全屏、可見性、拍照、預加載、電池狀態）