HTML <canvas>标记是HTML5元素,用作在HTML文档中绘制2D对象和位图图像等图形的容器。该容器中的实际图形使用 <script>标签绘制。此标记通常也称为 <canvas>元素。
通过 <canvas> 元素来显示一个蓝色正方形:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5 canvas by www.thinktus.com</title> </head> <body> <h1>Graphics Example</h1> <canvas id="(thinktus.com)_canvas" width="125" height="125"></canvas> <script> var canvas = document.getElementById("(thinktus.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); </script> </body> </html>测试看看 ‹/›
IEFirefoxOperaChromeSafari
IE 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签。
注释:IE 8 或更早版本的 IE 浏览器不支持 <canvas> 标签。
<canvas> 标签通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)。
<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。
HTML <canvas>元素位于<body>标记内。
<canvas>标记充当图形的容器。使用带有画布脚本API或WebGL API的<script>标记在<canvas>标记之外绘制所有图形
<canvas> 标签是 HTML5 中的新标签。
注释:<canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。
提示:如想了解 canvas 对象的所有属性和方法,请参阅HTML 画布参考手册。
New : HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
heightHTML5 | pixels | 规定画布的高度。 |
widthHTML5 | pixels | 规定画布的宽度。 |
<canvas> 标签支持 HTML 的全局属性。
<canvas> 标签支持 HTML 的事件属性。