JavaScript Canvas绘图需先获取2D上下文，再按步骤绘制矩形或路径图形，并预先设置样式；所有操作须在DOM加载后执行，且注意上下文有效性与状态管理。
JavaScript 通过获取 Canvas 元素的 2D 渲染上下文（getContext('2d')）来实现交互，所有绘图操作都基于这个上下文对象进行。
获取 Canvas 上下文
必须先拿到 <canvas> 元素，再调用 getContext('2d') 才能开始绘图。若忽略这一步，后续所有绘图方法都会无效。
- 确保 DOM 已加载完成，推荐在
DOMContentLoaded或window.onload中操作 - 检查返回值是否为
null，避免因浏览器不支持或参数错误导致静默失败 - 示例：const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
绘制矩形
Canvas 提供三种矩形方法：填充、描边、清除。它们都接受 x, y, width, height 四个参数。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
-
ctx.fillRect(x, y, w, h)：实心矩形，受fillStyle影响 -
ctx.strokeRect(x, y, w, h)：空心矩形，受strokeStyle和lineWidth影响 -
ctx.clearRect(x, y, w, h)：擦除指定区域（注意不是设为透明，而是恢复为初始空白）
绘制路径类图形（线段、圆、多边形）
这类图形需按“开始路径 → 构建路径 → 绘制”三步走，否则不会显示。
立即学习“Java免费学习笔记（深入）”；
- 用
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()保存/恢复整个绘图状态（含变换、裁剪、样式）
