DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> HTML5教程(1):HTML5的Canvas概述
HTML5教程(1):HTML5的Canvas概述
編輯:HTML和Xhtml     

網頁制作poluoluo文章簡介:HTML5的Canvas,腳本語言的新舞台.

<canvas>是一個新的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的組件提供一個窗體功能。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved