javascript的canvasapi如何绘图_如何动态生成和操作图像与动画【教程】

canvas.getContext('2d') 返回 null 主因是 canvas 元素未加载进 DOM，需确保在 DOMContentLoaded 后获取，检查 ID 是否拼写正确且元素存在，CSS 隐藏不影响 getContext。

canvas.getContext('2d') 返回 null 怎么办

直接调用 getContext('2d') 返回 null，基本只有一种可能： 元素还没加载进 DOM。比如脚本写在 里，或者没等 DOMContentLoaded 就执行了。

• 确保 DOM 加载完成后再获取 canvas，推荐用 document.addEventListener('DOMContentLoaded', ...)
• 检查 HTML 中是否漏写了 ，或 ID 拼写错误（比如写成 myCanvs）
• 确认 canvas 元素没有被 CSS 设置为 display: none 或 visibility: hidden —— 这不影响获取 context，但会影响渲染可见性

drawImage() 动态加载图片时黑屏或不显示

drawImage() 不会自动等待图片加载完成。如果传入一个 对象但它的 src 还没加载完，就会画出空白或报错 DOMException: The image argument is a canvas element with a width or height of 0。

• 必须监听 img.onload，在回调里调用 drawImage()
• 避免重复绑定 onload —— 如果 img 已经加载完成，onload 不会触发，可用 img.complete 判断
• 动态生成图像常用套路：

  const img = new Image();
  img.src = 'avatar.png';
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
  };

requestAnimationFrame 里清空画布的正确顺序

动画循环中，清空画布（clearRect()）的位置错了，会导致残留、闪烁或性能浪费。

Remover

几秒钟去除图中不需要的元素

下载

• 每次帧开始时第一件事就是清空：先 ctx.clearRect(0, 0, canvas.width, canvas.height)，再画新内容
• 不要用 canvas.width = canvas.width 清屏 —— 它会重置所有上下文状态（如 fillStyle、lineWidth），副作用太大
• 如果只动局部区域，可只清对应矩形区域，减少 GPU 填充压力；但全屏动画建议整屏清
• 注意 canvas 的 width/height 是绘图表面分辨率，不是 CSS 显示尺寸；缩放靠 CSS 会导致模糊，应同步设置 canvas.style.width 和 canvas.style.height

toDataURL() 导出透明背景却变成黑色

toDataURL() 默认导出 PNG，但若 canvas 本身没设透明背景（比如用 fillRect() 盖了一层白色），导出后就看不到透明通道。

立即学习“Java免费学习笔记（深入）”；

• 创建 canvas 后，ctx.fillStyle = 'transparent' 并 ctx.fillRect(0, 0, w, h) 不起作用 —— fillStyle 对透明无意义
• 真正要做的，是在绘制前确保 canvas 的合成模式支持 alpha：默认就是，但如果你中间用了 ctx.globalCompositeOperation = 'destination-over' 等操作，可能干扰
• 最稳妥方式：导出前手动清空为透明像素

  ctx.clearRect(0, 0, canvas.width, canvas.height); // 注意：clearRect 清的是透明

• 导出时显式指定类型：canvas.toDataURL('image/png')（JPEG 不支持透明）