Javascript如何与Canvas交互_如何绘制基本图形？

JavaScript Canvas绘图需先获取2D上下文，再按步骤绘制矩形或路径图形，并预先设置样式；所有操作须在DOM加载后执行，且注意上下文有效性与状态管理。

JavaScript 通过获取 Canvas 元素的 2D 渲染上下文（getContext('2d')）来实现交互，所有绘图操作都基于这个上下文对象进行。

获取 Canvas 上下文

必须先拿到 元素，再调用 getContext('2d') 才能开始绘图。若忽略这一步，后续所有绘图方法都会无效。

• 确保 DOM 已加载完成，推荐在 DOMContentLoaded 或 window.onload 中操作
• 检查返回值是否为 null，避免因浏览器不支持或参数错误导致静默失败
• 示例：const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

绘制矩形

Canvas 提供三种矩形方法：填充、描边、清除。它们都接受 x, y, width, height 四个参数。

• ctx.fillRect(x, y, w, h)：实心矩形，受 fillStyle 影响
• ctx.strokeRect(x, y, w, h)：空心矩形，受 strokeStyle 和 lineWidth 影响
• ctx.clearRect(x, y, w, h)：擦除指定区域（注意不是设为透明，而是恢复为初始空白）

绘制路径类图形（线段、圆、多边形）

这类图形需按“开始路径 → 构建路径 → 绘制”三步走，否则不会显示。

• 用 ctx.beginPath() 开启新路径，避免意外连接上一次的终点
• 用 moveTo() 定起点，lineTo() 连线段，arc() 画圆弧，closePath() 自动闭合
• 最后调用 fill() 或 stroke() 渲染（可单独调用，也可两者都调）
• 示例画圆：ctx.beginPath();
  ctx.arc(100, 100, 30, 0, Math.PI * 2);
  ctx.fill();

设置样式与状态

颜色、线条、阴影等样式需在绘制前设置，且会持续影响后续绘图，直到被重新赋值。

• ctx.fillStyle = '#ff6b6b' 或 'rgb(255,107,107)' 或 'transparent'
• ctx.strokeStyle = 'blue'; ctx.lineWidth = 2;
• ctx.shadowColor = 'rgba(0,0,0,0.3)'; ctx.shadowBlur = 5;（开启阴影）
• 用 ctx.save() 和 ctx.restore() 保存/恢复整个绘图状态（含变换、裁剪、样式）