canvas 元素用于在網(wǎng)頁(yè)上繪制圖形。

　　什么是 Canvas？

　　HTML 5 的 canvas 元素使用 JavaScript 在網(wǎng)頁(yè)上繪制圖像。

　　畫布是一個(gè)矩形區(qū)域，您可以控制其每一像素。

　　canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

　　創(chuàng)建 Canvas 元素

　　向 HTML 5 頁(yè)面添加 canvas 元素。

　　規(guī)定元素的 id、寬度和高度：

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

　　通過 JavaScript 來繪制

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

　　<script type="text/javascript">
　　var c=document.getElementById("myCanvas");
　　var cxt=c.getContext("2d");
　　cxt.fillStyle="#FF0000";
　　cxt.fillRect(0,0,150,75);
　　</script>

　　JavaScript 使用 id 來尋找 canvas 元素：

　　var c=document.getElementById("myCanvas");

　　然后，創(chuàng)建 context 對(duì)象：

　　var cxt=c.getContext("2d");

　　getContext("2d") 對(duì)象是內(nèi)建的 HTML 5 對(duì)象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

　　下面的兩行代碼繪制一個(gè)紅色的矩形：

　　cxt.fillStyle="#FF0000";

　　cxt.fillRect(0,0,150,75);

　　fillStyle 方法將其染成紅色，fillRect 方法規(guī)定了形狀、位置和尺寸。