HTML 5 Canvas
Canvas通過[JavaScript]來繪制2D圖形。Canvas 是逐像素進行渲染的。開發(fā)者可以通過javascript腳本實現(xiàn)任意繪圖。

在canvas中，一旦圖形被繪制完成，它就不會繼續(xù)得到瀏覽器的關注。如果其位置發(fā)生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。

1Canvas元素

canvas 元素用于在網(wǎng)頁上繪制圖形。[HTML5]的 canvas 元素使用 [JavaScript]在網(wǎng)頁上繪制2D圖像。

在矩形區(qū)域的畫布上，控制其每一像素，JavaScript來繪制2D圖形，逐像素進行渲染?？梢酝ㄟ^多種方法使用canvas 元素繪制路徑、矩形、圓形、字符以及添加圖像。

2創(chuàng)建

向 HTML5 頁面添加canvas元素，并規(guī)定元素的 id、寬度和高度。

<canvas id="myCanvas" width="200" height="100"></canvas>。

3繪制

canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成：

4理解坐標

上面的fillRect方法擁有參數(shù) (0,0,150,75)。

意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。

下面的在 canvas 元素上進行繪畫的更多實例：

通過指定從何處開始，在何處結束，來繪制一條線：

JavaScript代碼：

<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();</script>canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>