Canvas 是 HTML5 的位图绘图 API，通过 getContext('2d') 获取上下文，设置样式后调用 fillRect/strokeRect、lineTo/beginPath/stroke、arc 等方法绘制图形，需注意清空画布、beginPath 重置路径及弧度单位换算。
Canvas 是 HTML5 提供的位图绘图 API，通过 JavaScript 操作 元素的 2D 上下文（getContext('2d')），就能绘制线条、矩形、圆形、路径、文字等基本图形。关键在于获取上下文、设置样式、调用绘图方法、最后触发渲染。
获取 Canvas 上下文并清空画布
先在 HTML 中定义 canvas 元素，再用 JavaScript 获取其 2D 绘图上下文：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
每次重绘前建议清空画布，避免残留图形干扰：
ctx
.clearRect(0, 0, canvas.width, canvas.height);
绘制矩形（填充与描边）
Canvas 提供三类矩形方法，区别在于是否填充、是否描边：
-
填充矩形：
ctx.fillRect(x, y, width, height)—— 实心矩形 -
描边矩形：
ctx.strokeRect(x, y, width, height)—— 空心边框 -
清除矩形：
ctx.clearRect(x, y, width, height)—— 透明区域（擦除）
使用前可设置颜色和线宽：
ctx.fillStyle = '#ff6b6b'; // 填充色
ctx.strokeStyle = '#4ecdc4'; // 描边色
ctx.lineWidth = 2;
绘制直线与路径（lineTo + beginPath + stroke）
绘制任意折线或复杂形状需用路径（path）机制：
-
ctx.beginPath()—— 开始新路径（必须调用，否则会连接上一次路径） -
ctx.moveTo(x, y)—— 移动画笔到起点 -
ctx.lineTo(x, y)—— 画直线到目标点 -
ctx.closePath()—— 自动连线回起点（形成闭合图形） -
ctx.stroke()—— 描边显示路径 -
ctx.fill()—— 填充路径内部（需闭合才有效）
例如画一个三角形：
ctx.beginPath();
ctx.moveTo(100, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.fillStyle = 'gold';
ctx.fill();
ctx.strokeStyle = 'darkgoldenrod';
ctx.stroke();
绘制圆与弧（arc 方法）
用 ctx.arc() 可画圆、扇形、圆弧：
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
注意角度单位是弧度（不是度数），可用 Math.PI / 180 换算。例如画一个完整圆：
ctx.beginPath();
ctx.arc(200, 150, 40, 0, Math.PI * 2); // 圆心(200,150)，半径40，0到360°
ctx.fillStyle = 'lightblue';
ctx.fill();
若只画半圆，把 Math.PI * 2 改成 Math.PI 即可；加上 ctx.stroke() 就变成描边圆。
基本上就这些。Canvas 绘图不复杂但容易忽略 beginPath() 和单位换算，动手试几次就熟悉了。
