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