javascript如何与Canvas交互_能绘制图形吗_技术教程

Canvas绘图需先获取2D上下文ctx=canvas.getContext('2d')；绘图前须设置fillStyle/strokeStyle样式；路径操作须用beginPath()重置；width/height属性决定分辨率，CSS仅控制显示尺寸；交互需手动计算像素级逻辑。

Canvas 元素本身不支持直接绘图，必须通过 `getContext('2d')`

HTML 的只是一个空的位图画布容器，没有内置绘图能力。你得先用 getContext('2d') 获取 2D 渲染上下文，它才是真正的绘图接口。漏掉这一步，所有绘图调用（比如 fillRect）都会静默失败或报错 TypeError: ctx.fillRect is not a function。

常见错误写法：

const canvas = document.getElementById('myCanvas');
canvas.fillRect(10, 10, 100, 50); // ❌ 报错：fillRect 不是 canvas 的方法

正确写法：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // ✅ 必须这一步
ctx.fillRect(10, 10, 100, 50); // ✅ 现在可以了

绘制图形前必须设置样式，`fillStyle` 和 `strokeStyle` 默认是黑色

fillRect、fill() 用 fillStyle，strokeRect、stroke() 用 strokeStyle。不显式设置的话，它们都默认为 '#000000'（纯黑），容易误以为“没画出来”，其实是画了但颜色和背景一样。

fillStyle 支持颜色字符串（'red'）、十六进制（'#ff6b35'）、rgb（'rgb(255, 107, 53)'）、rgba（'rgba(255, 107, 53, 0.7)'）甚至渐变/图案
strokeStyle 同理，但只影响描边，不影响填充
注意：这些属性是上下文状态，会持续生效，直到被再次赋值

示例（避免“看不见”的坑）：

const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 128, 255, 0.8)';
ctx.fillRect(20, 20, 80, 40);
ctx.strokeStyle = '#e74c3c';
ctx.lineWidth = 3;
ctx.strokeRect(20, 20, 80, 40);

路径操作要配对使用 `beginPath()` 和 `closePath()`，否则旧路径会累积

Canvas 是基于状态的绘图模型，不是声明式。所有路径命令（moveTo、lineTo、arc 等）都作用于当前路径。如果不手动清空，多次调用 fill() 或 stroke() 会重复绘制之前所有路径，造成意外重叠或性能下降。

beginPath() 重置当前路径（清空点序列）
closePath() 是可选的：自动连线到起点，形成闭合区域；但 fill() 即使不闭合也会自动封闭再填充
漏掉 beginPath() 是高频 bug 来源，尤其在循环绘图或动画中

错误示范（画两个圆，第二个变大且有双轮廓）：

ctx.arc(50, 50, 20, 0, Math.PI * 2);
ctx.fill(); // 第一个圆
ctx.arc(100, 50, 30, 0, Math.PI * 2);
ctx.fill(); // 第二个圆 → 实际画了两个弧！

正确写法：

ctx.beginPath();
ctx.arc(50, 50, 20, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(100, 50, 30, 0, Math.PI * 2);
ctx.fill();

Canvas 绘图不可响应式缩放，`width`/`height` 属性和 CSS 尺寸必须区分

Canvas 的实际绘图分辨率由 HTML 属性 width 和 height 决定（单位：像素），而 CSS 的 width/height 只控制显示尺寸。如果只用 CSS 缩放，图像会模糊、锯齿，因为底层像素没变多。

响应式做法：监听窗口变化，用 JS 重设 canvas.width 和 canvas.height，再重绘
不要写却不改属性值
获取设备像素比（window.devicePixelRatio）可提升高清屏清晰度，但需额外缩放坐标

基础适配示例：

function resizeCanvas() {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = canvas.clientWidth * dpr;
  canvas.height = canvas.clientHeight * dpr;
  ctx.scale(dpr, dpr); // 坐标系同步缩放
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas(); // 初始化

Canvas 的交互本质是「你完全掌控像素」，没有 DOM 那样的事件冒泡或自动布局。所有点击判断、动画更新、状态管理都要自己算——比如检测鼠标是否在某个自绘圆形内，得用距离公式，而不是加 onclick。这点最容易低估复杂度。