Canvas翻译过来就是"画布"的意思。在Web开发中，Canvas是HTML5新增的一个元素，专门用于在网页上绑制图形。
想象一下现实中的画布：一块白色的布，画家可以用画笔在上面创作。HTML5的Canvas也是类似的：
<canvas>标签定义的矩形区域Canvas是一个可以使用脚本（通常是JavaScript）在其中绑制图形的HTML元素。它提供了一组API，让开发者能够：
Canvas本质上是一个位图画布，这意味着：
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
// 绑制一个矩形
ctx.fillStyle = 'red'
ctx.fillRect(10, 10, 100, 50)
// 画完之后，Canvas只存储了像素数据
// 不再"记得"这里有一个矩形
这一点很重要：Canvas绑制的是像素，不是对象。绑制完成后，Canvas只知道每个像素的颜色，不知道"这里有个矩形"。
| 特性 | Canvas | DOM元素 |
|---|---|---|
| 渲染方式 | 位图渲染 | 矢量渲染 |
| 事件处理 | 需要计算坐标 | 直接绑定事件 |
| 性能 | 大量元素时更好 | 元素多时性能下降 |
| 缩放 | 会模糊 | 保持清晰 |
| 内容操作 | 需要重绘 | 可以直接修改 |
在Canvas出现之前，网页上的图形主要依靠：
Canvas解决了这些问题：
<!-- 动态生成图表 -->
<canvas id="chart"></canvas>
<script>
const ctx = document.getElementById('chart').getContext('2d')
const data = [120, 200, 150, 80, 70, 110]
// 根据数据动态绑制柱状图
data.forEach((value, index) => {
ctx.fillRect(index * 60 + 20, 300 - value, 40, value)
})
</script>
| 时间 | 事件 |
|---|---|
| 2004年 | Apple在Safari中首次实现Canvas |
| 2005年 | Canvas被纳入HTML5草案 |
| 2014年 | HTML5正式发布，Canvas成为标准 |
| 现在 | 所有主流浏览器都支持 |
现代浏览器对Canvas的支持非常好：
IE9及以上支持Canvas，IE8及以下需要使用excanvas.js兼容库。
可以通过以下代码检测浏览器是否支持Canvas：
function isCanvasSupported() {
const canvas = document.createElement('canvas')
return !!(canvas.getContext && canvas.getContext('2d'))
}
if (isCanvasSupported()) {
console.log('浏览器支持Canvas')
} else {
console.log('浏览器不支持Canvas')
}