HTML Canvas 教程

HTML <canvas> 元素用于在网页上绘制图形。

上面的图形是用 <canvas> 创建的。

它显示了四个元素：红色矩形、渐变矩形、多色矩形和多色文本。

什么是 HTML Canvas？

HTML <canvas> 元素用于通过脚本（通常是 JavaScript）动态地绘制图形。

<canvas> 元素只是图形的容器。您必须使用脚本来绘制实际的图形。

Canvas 有多种方法用于绘制路径、方框、圆形、文本和添加图像。

HTML Canvas 可以绘制文本

Canvas 可以绘制彩色文本，还可带动画效果。

HTML Canvas 可以绘制图形

Canvas 拥有使用图形和图表进行图形化数据呈现的强大能力。

HTML Canvas 可以动画化

Canvas 对象可以移动。一切皆有可能：从简单的弹跳球到复杂的动画。

HTML Canvas 可以交互

Canvas 可以响应 JavaScript 事件。

Canvas 可以响应任何用户操作（按键单击、鼠标单击、按钮单击、手指移动）。

HTML Canvas 可用于游戏

Canvas 的动画方法为 HTML 游戏应用程序提供了很多可能性。

Canvas Example

在 HTML 中，<canvas> 元素看起来是这样的：

<canvas id="myCanvas" width="200" height="100"></canvas>

<canvas> 元素必须有 id 属性，以便 JavaScript 可以引用它。

width 和 height 属性对于定义画布的大小也是必需的。

提示：一张 HTML 页面上可以有多个 <canvas> 元素。

默认情况下，<canvas> 元素没有边框，也没有内容。

如需添加边框，请使用 style 属性：

实例

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

亲自试一试

接下来的章节将介绍如何在画布上绘图。

另请参阅：

W3School 的完整 Canvas 参考手册

浏览器支持

<canvas> 元素是 HTML5 标准 (2014)。

所有现代浏览器都支持 <canvas>：