<canvas>
是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画. 右边的图片展示了一些 <canvas>
的实现示例,在这个教程后面我们将看到.
本篇教程从一些基础开始,描述了如何使用<canvas>元素来绘制2D图形。教程中提供的例子,会让你明白可以用canvas做什么,也会提供一些代码片段来帮助你开始构建自己的内容。
<canvas>
最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,随后被各个浏览器实现。如今,所有主流的浏览器都支持它。
开始之前
使用 <canvas>
元素不是非常难,但你需要一些基本的HTML
和JavaScript
知识。除一些过时的浏览器不支持<canvas>
元素外,所有的新版本主流浏览器都支持它。Canvas 的默认大小为300像素×150像素(宽×高,像素的单位是px)。但是,可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。为了在 Canvas 上绘制图形,我们使用一个JavaScript上下文对象,它能动态创建图像( creates graphics on the fly)。
本教程包含
- 基本用法
- 绘制图形
- 使用样式与颜色
- 绘制文本
- 使用图像
- 变形
- 合成和剪辑
- 基本动画
- 高级动画
- 像素处理
- 点击区域和无障碍访问
- 优化 canvas
- 最后
@ https://developer.mozilla.org