canvas
定义HTML5 位图画布元素，用 JavaScript 脚本化绘制图形、动画与游戏
canvas 是「一块可以用 JS 画图的位图区域」：拿到 2D 上下文后，用坐标、路径、样式指令逐帧绘制。它与 SVG 的根本区别是命令式位图——画完的图形不再是对象，改一个像素都要重画，换来的是大量元素时的高性能。
高清屏适配是第一道坎：canvas 的 CSS 尺寸与像素尺寸分离，必须按 devicePixelRatio 放大画布再缩放上下文，否则文字和线条发虚。
- requestAnimationFrame 驱动动画循环，别用 setInterval；
- 清屏用 clearRect，状态保存/恢复用 save/restore；
- 图表、游戏、图像处理是 canvas 的主场。
JavaScript
const cv = document.getElementById('c'); const ctx = cv.getContext('2d'); const dpr = window.devicePixelRatio || 1; cv.width = 600 * dpr; cv.height = 300 * dpr; // 物理像素放大 ctx.scale(dpr, dpr); // 逻辑坐标还原 ctx.fillStyle = '#2f81f7'; ctx.fillRect(20, 20, 120, 80); // 画矩形
⚠ 常见误区
- 忘乘 devicePixelRatio 是高清屏发虚的唯一原因
- canvas 内容无法被搜索引擎读取，重要信息要有文字替代
- 动画循环里先 clearRect 再绘制，否则拖影