Canvas (HTML元素)

画布（canvas）元素是HTML5的一部分，允許脚本语言（scripting languages）動態渲染點陣圖像。

歷史

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

範例

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(); //画出刚刚绘制的边框 

参考文献

1. Ian Hixie. Extending HTML. 2004-07-12 [2011-06-13]. （原始内容于2011-05-25）. 
2. Opera 9.0 changelog. [2009-05-28]. （原始内容存档于2012-09-10）. 
3. Ian Hickson remarks regarding canvas and other Apple extensions to HTML. [2018-06-16]. （原始内容于2018-06-16）.