用 Canvas 畫圖
出自 MozTW Wiki
本文章為 Mozilla Developer Center 的 Drawing Graphics with Canvas {{{2}}} 的翻譯。原文的作者與編修歷史可在它的Drawing Graphics with Canvas&action=history 歷史頁上看到。
簡介
Mozilla Firefox 1.5 裡有個新的，作用為可編程圖片的 HTML 元素。<canvas> 根據 WhatWG canvas 規格，而這又是根據 Apple Safari 裡的 <canvas> 實作。這元素可用來利用程式碼在客戶端上繪製圖表、介面、或其它自訂圖片。
<canvas> 會建立固定大小的繪圖空間，並會有一個或多個「繪製態」（rendering context）。在本文裡我們會專注在 2D 的繪製（這也是目前唯一有定義的繪製態）。在未來將會更多的繪製態來提供其它類別的繪製，例如使用 OpenGL 的 3D 繪製。
平面
2D 繪製態
簡單的範例
我們一開始先來一個簡單的，一個半透明正方形蓋在另一個正方形之上的範例：
範例一
<html>
<head>
<script type="application/x-javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)"; // 把「填滿樣式」設為紅 200 綠 0 籃 0
ctx.fillRect (10, 10, 50, 50); // 畫一個填充的長方形
ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; // 把「填滿樣式」設為紅 0 綠 0 籃 200 透度 0.5
ctx.fillRect (30, 30, 50, 50); // 畫一個填充的長方形
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
draw 函數先取得 canvas 元素，再取得 2d 態。ctx 這物件可用來實際在畫板上繪製。本範例以用 CSS 顏色設定 fillStyle（填滿樣式）與呼叫 fillRect 的方式來繪出兩個方形。第二個 fillStyle 是用 rgba() 來一併定義顏色與透度（alpha）的值。
fillRect、strokeRect、與 clearRect calls 繪製填充、輪廓線、與透明的長方形。較複雜的形狀用路徑（path）。
