HTML5画布元素使您能够在HTML5页面的画布元素范围内自由绘制2D图形。因此,HTML5 Canvas 是一个很好的选择,例如在网页中绘制图表和图形。你甚至可以使用HTML5画布元素创建2D游戏。
HTML5 画布元素是一个普通的 HTML5 元素,因此您可以像其他 HTML 元素一样声明它。 但是,您在画布元素上绘制图形的方式是通过 JavaScript API。
下面是一个简单的例子。点击这个按钮就可以在画布上作画。
不支持HTML5画布
不过,这个例子只展示了你能用HTML5画布元素做的很小一部分事情。
HTML5 画布的功能和概念
以下是 HTML5 画布元素的核心功能和概念的列表。
- 描边和填充
- 矩形
- clearRect() - 清除画布上的一个矩形
- 路径 - 绘制高级路径,如曲线等。
- 渐变色
- 阴影
- 文本
- 图像
- 构图
- 变形
- 状态+状态栈
- toDataUrl() - 将图形转换为一个数据URL
- 像素操作
- 动画
要了解上述每个主题的更多信息,请点击列表中的链接。