在线示例
通过 元素来显示一个蓝色正方形:
示例html>
HTML5 canvas by www.nhooo.comGraphics Example
var canvas = document.getElementById("nhooo_com_canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#4B6692";
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
测试看看 ‹/›在此HTML5文档示例中,我们使用了标记创建了一个大小为125px x 125px且ID为的容器nhooo_com_canvas。
浏览器兼容性
IEFirefoxOperaChromeSafari
IE 9、Firefox、Opera、Chrome 和 Safari 支持 标签。
注释:IE 8 或更早版本的 IE 浏览器不支持 标签。
标签定义及使用说明
标签通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)。
标签只是图形容器,您必须使用脚本来绘制图形。
HTML 元素位于标记内。
标记充当图形的容器。使用带有画布脚本API或WebGL API的
HTML 4.01 与 HTML5之间的差异
标签是 HTML5 中的新标签。
提示和注意
注释: 元素中的任何文本将会被显示在不支持 的浏览器中。
提示:如想了解 canvas 对象的所有属性和方法,请参阅HTML 画布参考手册。
属性
New : HTML5 中的新属性。属性值描述
pixels规定画布的高度。
widthHTML5pixels规定画布的宽度。
全局属性
标签支持 HTML 的全局属性。
事件属性
标签支持 HTML 的事件属性。