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>
接下来的章节将介绍如何在画布上绘图。
另请参阅:
浏览器支持
<canvas> 元素是 HTML5 标准 (2014)。
所有现代浏览器都支持 <canvas>:
Chrome | Edge | Firefox | Safari | Opera | IE |
---|---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera | IE |
支持 | 支持 | 支持 | 支持 | 支持 | 9-11 |