<canvas> 標簽定義圖形、，比如圖表和其他圖像，您必須使用腳本來繪制圖形

HTML5 <canvas> 元素用於圖形的繪制，通過腳本 (通常是JavaScript)來完成

<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形

創建一個畫布:

一個畫布在網頁中是一個矩形框，通過 <canvas> 元素來繪制

註意: 默認情況下 <canvas> 元素沒有邊框和內容

實例 --->

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

註意:

提示:你可以在HTML頁面中使用多個 <canvas> 元素

使用 style 屬性來設置邊框，實例 --->

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

運行效果 --->

您的瀏覽器不支持 HTML5 canvas 標簽。

提示：瀏覽器還未支持HTML5

使用JavaScript來繪制圖像：

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

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

</script>

實例解析:

首先，找到 <canvas> 元素：

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

然後，創建 context 對象：

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

getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法

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

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

設置fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000（黑色）

fillRect(x,y,width,height) 方法定義了矩形當前的填充方式

Canvas 坐標：

canvas 是一個二維網格。

canvas 的左上角坐標為 (0,0)

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

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

坐標實例

如下圖所示，畫布的 X 和 Y 坐標用於在畫布上對繪畫進行定位。鼠標移動的矩形框上，顯示定位坐標。

15、HTML5 畫布