舊文件

此處文件僅供參考,請自行考量時效性與適用程度,其他庫藏文件請參考文件頁面
我們亟需您的協助,進行共筆系統搬移、及文件整理工作,詳情請查閱參與我們

用 Canvas 畫圖

出自 MozTW Wiki

於 2005年10月23日 (日) 17:09 由 Danielwang對話 | 貢獻 所做的修訂
本文章為 Mozilla Developer Center 的 Drawing_Graphics_with_Canvas Drawing Graphics with Canvas 的翻譯。原文的作者與編修歷史可在它的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)的值。

fillRectstrokeRect、與 clearRect calls 繪製填充、輪廓線、與透明的長方形。較複雜的形狀用路徑(path)。

個人工具