HTML 5 Canvas

canvas 元素用於在網頁上繪製圖形。HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製2D圖像。

在矩形區域的畫布上，控制其每一像素，JavaScript 來繪製 2D圖形，逐像素進行渲染。可以通過多種方法使用canvas 元素繪製路徑、矩形、圓形、字元以及添加圖像。

向 HTML5 頁面添加 canvas元素，並規定元素的 id、寬度和高度。

。

canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：

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

JavaScript 使用 id 來尋找 canvas 元素：

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

然後，創建 context 對象：

var cxt=c.getContext("2d"); getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法。

下面的兩行代碼繪製一個紅色的矩形：

cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75); fillStyle 方法將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。

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

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

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

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

JavaScript代碼：

canvas 元素：