HTML Canvas 画布教程

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

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

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

什么是 HTML 画布?

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

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

<canvas> 有几种用于绘制路径、框、圆、文本和添加图像的方法。

浏览器支持

表中的数字指定了完全支持<canvas>元素的第一个浏览器版本。

HTML 画布可以绘制文本

画布可以绘制彩色文本，无论是否带有动画。

HTML 画布可以绘制图形

画布具有强大的图形数据展示功能，并提供图形和图表的图像。

HTML 画布可以设置动画

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

HTML 画布可以是交互式的

画布可以响应 JavaScript 事件。

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

HTML 画布可以在游戏中使用

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

画布实例

在HTML中, <canvas> 元素如下所示:

<canvas> 画布元素必须有一个 id 属性，这样它才能被 JavaScript 引用。

宽度和高度属性是定义画布大小必需的。

提示: 在一个HTML页面上可以有多个 <canvas> 画布元素。

要添加边框，请使用样式属性：

接下来的章节将展示如何在画布上画画。