HTML: <canvas> 标签

HTML <canvas>标记是HTML5元素，用作在HTML文档中绘制2D对象和位图图像等图形的容器。该容器中的实际图形使用 <script>标签绘制。此标记通常也称为 <canvas>元素。

在线示例

通过 <canvas> 元素来显示一个蓝色正方形：

示例

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 canvas by www.div.cn</title>
</head>
<body>
<h1>Graphics Example</h1>
<canvas id="div.cn_canvas" width="125" height="125"></canvas>
<script>
  var canvas = document.getElementById("div.cn_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>

测试看看 ‹/›

在此HTML5文档示例中，我们使用了<canvas>标记创建了一个大小为125px x 125px且ID为的容器div.cn_canvas。<script>标记用于在此容器内绘制图形。在此示例中，我们绘制了一个带有斜面内部的蓝色正方形。

浏览器兼容性

IEFirefoxOperaChromeSafari

IE 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签。

注释：IE 8 或更早版本的 IE 浏览器不支持 <canvas> 标签。

标签定义及使用说明

<canvas> 标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

HTML <canvas>元素位于<body>标记内。
<canvas>标记充当图形的容器。使用带有画布脚本API或WebGL API的<script>标记在<canvas>标记之外绘制所有图形

HTML 4.01 与 HTML5之间的差异

<canvas> 标签是 HTML5 中的新标签。

提示和注意

注释：<canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。

提示：如想了解 canvas 对象的所有属性和方法，请参阅HTML 画布参考手册。

属性

New : HTML5 中的新属性。

属性	值	描述
heightHTML5	pixels	规定画布的高度。
widthHTML5	pixels	规定画布的宽度。

全局属性

<canvas> 标签支持 HTML 的全局属性。

事件属性

<canvas> 标签支持 HTML 的事件属性。

HTML: <button> 标签 HTML: <details> 标签

HTML参考手册

HTML 参考手册

HTML 标签大全

HTML 事件

HTML 属性

HTML 画布