当前位置：首页 > 文章列表 > 文章 > 前端 > Canvas是什么？JavaScript画布绘图教程

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

2026-02-05 23:06:22 0浏览收藏

如何获取 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); // 蓝色矩形
ctx.beginPath();
ctx.arc(200, 100, 30, 0, Math.PI * 2);
ctx.fillStyle = '#f5a623';
ctx.fill(); // 黄色圆

用 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);
// 更新逻辑（此处简化为匀速移动）
x = (x + 2) % canvas.width;
// 绘制
ctx.fillStyle = 'red';
ctx.fillRect(x, 100, 40, 40);
requestAnimationFrame(animate);
}
animate();

为什么 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学习网公众号也会发布文章相关知识，快来关注吧！