canvas绘图需先获取2d上下文对象，再用fillrect/strokerect绘矩形、arc+beginpath绘圆、moveto/lineto/closepath绘多边形，注意宽高属性与css区别及坐标原点在左上角。
要用 Canvas 绘制基础几何图形，核心是正确获取并使用 2D 渲染上下文（CanvasRenderingContext2D），它才是实际执行绘图操作的对象。没有它，所有绘图方法都无效。
必须先获取 2D 上下文
Canvas 元素本身只是容器，绘图能力全靠上下文对象。不能跳过这步直接调用 fillRect 或 arc。
- 确保 DOM 已加载完成，再通过
document.getElementById或querySelector获取 canvas 元素 - 调用
canvas.getContext('2d')—— 返回null表示不支持或调用时机错误，建议加存在性判断 - 上下文对象一旦获取，后续所有绘图、样式、路径操作都通过它进行
注意 canvas 的宽高设置方式
HTML 属性 width 和 height 决定绘图缓冲区大小，CSS 的 width/height 只控制显示尺寸。二者混用会导致图形拉伸或不可见。
- 在 HTML 中直接写：
<canvas id="myCanvas" width="400" height="300"></canvas> - 或用 JS 动态设置：
canvas.width = 400; canvas.height = 300;（必须是属性赋值，不是 CSS） - 避免仅用 CSS 设置尺寸，否则绘图区域仍为默认 300×150，图形可能被压缩或裁剪
绘制矩形：fillRect 和 strokeRect
矩形是最简单的图形，有填充和描边两种方式，无需路径操作。
-
ctx.fillStyle = '#369'; ctx.fillRect(50, 30, 120, 80);—— 绘制实心矩形，参数为左上角 x、y、宽、高 -
ctx.strokeStyle = '#000'; ctx.lineWidth = 2; ctx.strokeRect(50, 30, 120, 80);—— 绘制空心边框 - 坐标原点在左上角，x 向右增大，y 向下增大；负值会把图形画出可视区域
绘制圆形：arc + beginPath + fill/stroke
Canvas 没有 <circle></circle> 标签，所有圆都靠 arc() 方法绘制，且必须配合路径操作。
-
ctx.beginPath();—— 每次绘制新图形前都要调用，防止路径叠加 -
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);—— 前三参数是圆心和半径，后三为弧度范围（不是角度！） - 画整圆：起始弧度
0，终止弧度Math.PI * 2 - 实心圆需接
ctx.fill()，空心圆用ctx.stroke()，并提前设strokeStyle和lineWidth
绘制三角形或多边形：moveTo + lineTo + closePath
没有现成的 drawTriangle 方法，必须手动构建路径。
ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineTo(x3, y3); ctx.closePath();-
closePath()会自动连接最后一个点到起点，形成闭合区域 -
fill()填充时自动闭合路径，stroke()则只描已定义的线段 - 填充颜色由
fillStyle控制，描边颜色由strokeStyle控制，两者可不同
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
