Canvas是什么？JavaScript画布绘图教程

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《Canvas是什么？JavaScript画布绘图教程》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

Canvas 是需手动控制每帧绘制的底层位图画布，依赖 JavaScript 上下文接口；须显式设置 width/height 属性、用 requestAnimationFrame 实现动画、监听图片 load 事件并处理跨域，否则易出现失真、空白或错乱。

是 HTML 中一个原生的位图画布元素，本身不绘图，只提供一块空白的、可编程的像素区域。它的能力完全依赖 JavaScript 的 getContext('2d') 或 getContext('webgl') 接口驱动。

直接回答核心问题：Canvas 不是“自动渲染”的容器，而是“你负责每一帧怎么画”的底层绘图表面。想画图形或动画，必须手动调用绘图 API 并控制绘制时机——没有声明式语法，也没有内置图层或事件代理。

如何获取 2D 绘图上下文并确认 Canvas 尺寸有效

很多初学者卡在第一步：调用 getContext('2d') 返回 null，或画出来图形极小、模糊、偏移。根本原因通常是 Canvas 的 width 和 height 属性未显式设置（仅靠 CSS 缩放会拉伸像素，不改变实际分辨率）。

• width 和 height 必须作为 HTML 属性或 JS 属性直接赋值，例如：canvas.width = 800; canvas.height = 600;
• CSS 的 style.width/style.height 只控制显示尺寸，不影响绘图坐标系；若二者不一致，图像会被缩放失真
• 务必在 DOM 加载完成后再获取上下文，否则 getContext 可能返回 null

const canvas = document.getElementById('myCanvas');
if (canvas) {
  canvas.width = 800;
  canvas.height = 600;
  const ctx = canvas.getContext('2d');
  if (ctx) {
    // ✅ 安全开始绘图
  }
}

用 fillRect、arc、beginPath 等基础 API 绘制静态图形

Canvas 的 2D API 是状态机模型：设置样式（fillStyle、strokeStyle）、定义路径（moveTo、lineTo、arc）、再执行绘制（fill()、stroke()）。漏掉 beginPath() 或重复调用 fill() 可能导致意外叠加。

• fillRect(x, y, width, height) 是最简矩形，不走路径系统，适合 UI 元素或背景块
• 画圆/弧必须用 arc(x, y, radius, startAngle, endAngle, anticlockwise)，角度单位是弧度（不是度），Math.PI * 2 表示一圈
• 每次新路径前建议调用 ctx.beginPath()，避免上一次路径残留影响当前绘制

const ctx = canvas.getContext('2d');
ctx.fillStyle = '#4a90e2';
ctx.fillRect(50, 50, 100, 60); // 蓝色矩形
<p>ctx.beginPath();
ctx.arc(200, 100, 30, 0, Math.PI * 2);
ctx.fillStyle = '#f5a623';
ctx.fill(); // 黄色圆</p>

用 requestAnimationFrame 实现平滑动画而非 setInterval

Canvas 动画本质是「清屏 → 计算新位置 → 重绘」的循环。用 setInterval 容易丢帧、不同步屏幕刷新率，且无法感知页面是否隐藏。正确方式是使用 requestAnimationFrame，它由浏览器调度，天然与刷新率对齐（通常 60fps），并在标签页不可见时自动暂停。

• 动画函数需递归调用自身，形成链式调用：function animate() { /* 绘图逻辑 */ requestAnimationFrame(animate); }
• 清屏不要只靠 clearRect：若背景复杂（如渐变、图片），应重绘整个背景，否则会残留运动残影
• 注意坐标更新逻辑是否与时间相关（推荐用 performance.now() 做 delta 时间计算，避免帧率波动导致速度不一致）

let x = 0;
function animate() {
  // 清屏（覆盖整个画布）
  ctx.clearRect(0, 0, canvas.width, canvas.height);
<p>// 更新逻辑（此处简化为匀速移动）
x = (x + 2) % canvas.width;</p><p>// 绘制
ctx.fillStyle = 'red';
ctx.fillRect(x, 100, 40, 40);</p><p>requestAnimationFrame(animate);
}
animate();</p>

为什么 drawImage 拉伸变形或不显示图片

用 drawImage 加载外部图片时，常见问题包括：图片未加载完成就绘制（空白）、跨域限制报错、目标尺寸比例不对导致挤压。Canvas 对图片资源有严格加载时序和安全策略要求。

• 必须监听图片的 load 事件，确保 img.complete === true 后再调用 drawImage
• 若图片来自其他域名，服务器需返回 Access-Control-Allow-Origin 头，且 img.crossOrigin = 'anonymous' 必须在设置 src 前完成
• drawImage(img, dx, dy) 使用原始尺寸；drawImage(img, dx, dy, dWidth, dHeight) 才会缩放——别漏掉后两个参数

const img = new Image();
img.crossOrigin = 'anonymous'; // 跨域必需
img.src = '/path/to/image.png';
img.onload = () => {
  ctx.drawImage(img, 0, 0, 200, 150); // 显式指定目标宽高
};

Canvas 的难点不在 API 数量，而在于它把所有责任都交还给你：尺寸管理、状态清理、时间控制、资源加载时序、像素对齐……少一个环节，画面就可能错乱或卡顿。尤其动画中，requestAnimationFrame 的调用节奏、clearRect 的范围、路径重置的时机，三者稍有疏忽就会出现难以复现的视觉异常。

终于介绍完啦！小伙伴们，这篇关于《Canvas是什么？JavaScript画布绘图教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！