canvas 是需手动控制每帧绘制的底层位图画布，依赖 javascript 上下文接口；须显式设置 width/height 属性、用 requestanimationframe 实现动画、监听图片 load 事件并处理跨域，否则易出现失真、空白或错乱。
<canvas></canvas> 是 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() 可能导致意外叠加。
立即学习“Java免费学习笔记（深入）”；
-
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(); // 黄色圆用 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();为什么 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 的范围、路径重置的时机，三者稍有疏忽就会出现难以复现的视觉异常。
