Canvas (HTML元素)

畫布（canvas）元素是HTML5的一部分，允許手稿語言（scripting languages）動態渲染點陣圖像。

歷史

它最初由蘋果內部使用自己Mac OS X WebKit推出，供儀表盤的構件和Safari瀏覽器等應用程式使用。後來，它被Gecko核心的瀏覽器（尤其是Mozilla Firefox），Opera和Chrome實作，並被網頁超文字應用技術工作小組提議為下一代的網絡技術的標準元素。在介紹Canvas給不同的Web標準社區時，他們有不同的反應。有些人抱怨蘋果公司建設了一個新的專有標準而不是支援未被網絡開發商廣泛接受的SVG標準。

範例

Canvas是一個HTML元素。可以利用JavaScript程式語言在該元素上繪圖，常見的應用包括繪製圖形及文字、影像處理、遊戲及動畫製作。 若要在HTML上放置Canvas元素，可以使用以下範例：

<canvas id="canvas" width="寬度" height="高度">
  您的瀏覽器不支援canvas元素（此訊息在瀏覽器不支援canvas元素時顯示）
</canvas>

這是一段在 Canvas 元素上繪製一個 100x100 大小的正方形的 Javascript 代碼：

var c=document.getElementById("canvas");     //获取HTML中的Canvas元素。
var ctx=c.getContext("2d");                  //它返回一个在二维平面上绘图的环境。
ctx.fillStyle = 'green';                     //设置填充时使用green（绿色）
ctx.rect(0,0,100,100);                       //在 x=0, y=0 的位置绘制一个 100x100的矩形
ctx.stroke();                                //画出刚刚绘制的边框