html5 Canvas

什麼是 Canvas？

---

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

畫布是一個矩形區域，您能夠控制其每一像素。

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

瀏覽器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 &ltcanvas&gt 元素.

注意: Internet Explorer 8 及更早 IE 版本的瀏覽器不支持 &ltcanvas&gt 元素.

建立一個畫布（Canvas）

---

一個畫布在網頁中是一個矩形框，經過 (canvas) 元素來繪製.

注意: 默認狀況下 (canvas) 元素沒有邊框和內容。

(canvas)簡單實例以下:

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

注意: 標籤一般須要指定一個id屬性 (腳本中常常引用), width 和 height 屬性定義的畫布的大小.

提示:你能夠在HTML頁面中使用多個 (canvas) 元素.

使用 style 屬性來添加邊框:

實例

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

Canvas - 路徑

---

在Canvas上畫線，咱們將使用如下兩種方法：

• moveTo(x,y) 定義線條開始座標

• lineTo(x,y) 定義線條結束座標

繪製線條咱們必須使用到 "ink" 的方法，就像stroke().

實例定義開始座標(0,0), 和結束座標 (200,100). 而後使用 stroke() 方法來繪製線條:

JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

在canvas中繪製圓形, 咱們將使用如下方法:

• arc(x,y,r,start,stop)

實例使用 arc() 方法 繪製一個圓:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();