17370845950

Canvas API 是浏览器原生位图绘制接口，无状态、无图层；需用 getContext('2d') 获取上下文，注意 DOM 加载、HTML 宽高属性及高清屏适配；矩形方法即刻绘制，路径操作须 beginPath()→fill()/stroke()；clearRect() 不重置状态，清屏推荐 canvas.width = canvas.width 或 save()/restore()。

Canvas API 是浏览器原生提供的、用于在网页上动态绘制位图的底层图形接口，它不自动记录绘图状态，也不提供图层或对象模型——画完即“失忆”，所有图形都直接渲染到像素缓冲区。

怎么获取并初始化 上下文

必须先用 getContext('2d') 获取 2D 渲染上下文，这是后续所有绘图操作的入口；调用失败（比如传错参数）会返回 null，不报错但后续方法全失效。

• 确保 DOM 已加载完成再访问 canvas 元素，否则 getElementById 返回 null
• 不要忽略 width 和 height 属性：CSS 设置宽高只会缩放画布，真正

  

  绘图区域由 HTML 属性决定
• 若需高清显示（如 Retina 屏），需手动按 window.devicePixelRatio 缩放 canvas 像素尺寸，并用 ctx.scale() 校正坐标系

fillRect()、strokeRect() 和路径绘制的区别

矩形类方法是“即刻绘制”，而 beginPath() + moveTo() + lineTo() 等构成路径后，必须显式调用 fill() 或 stroke() 才真正上屏。路径不会自动闭合，closePath() 只是补一条线段，不触发填充/描边。

• fillRect(x, y, w, h) 绘制实心矩形，不依赖路径，也不受 beginPath() 影响
• 路径操作（如 arc()、quadraticCurveTo()）必须成对使用：beginPath() → 绘制命令 → fill()/stroke()
• 漏掉 beginPath() 会导致新图形叠加在旧路径上，多次 stroke() 会重复描边

为什么 clearRect() 不总能清干净？

clearRect() 只清除指定矩形区域的像素，但它不重置绘图状态（如颜色、线条宽度、变换矩阵）。如果之前用了 ctx.translate() 或 ctx.rotate()，清空区域可能偏移；更隐蔽的问题是：它不清除阴影、滤镜等合成效果残留。

• 最稳妥的清屏方式是重设 canvas 尺寸：canvas.width = canvas.width（会重置所有上下文状态）
• 若需保留部分状态（如全局 alpha），应先 save()，清屏后再 restore()
• 动画中频繁调用 clearRect() 比重设尺寸性能更好，但务必确认坐标系未被意外变换

Canvas 的“无状态”本质决定了它灵活也易错——每次 stroke() 都是你最后一次 beginPath() 以来的所有路径，每次 fillStyle 改变只影响之后的填充，没有“撤销”概念。习惯性写 beginPath() 和检查 ctx 是否为有效对象，比记住所有 API 更关键。