HTML Canvas 画布教程


Your browser does not support the <canvas> element.

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

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

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


什么是 HTML 画布?

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

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

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


浏览器支持

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

元素
<canvas> 4.0 9.0 2.0 3.1 9.0

HTML 画布可以绘制文本

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


HTML 画布可以绘制图形

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



HTML 画布可以设置动画

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


HTML 画布可以是交互式的

画布可以响应 JavaScript 事件。

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


HTML 画布可以在游戏中使用

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


画布实例

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

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

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

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

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

默认情况下, <canvas> 画布元素没有边框和内容。

要添加边框,请使用样式属性:

实例

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

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