HTMLCanvas通过JavaScript绘制图形，需先创建canvas标签并获取2D上下文。使用fillRect、strokeRect绘制矩形，beginPath结合moveTo、lineTo绘制路径，arc绘制圆形，通过fillStyle、strokeStyle设置颜色，lineWidth设置线宽，globalAlpha设置透明度，掌握这些基础可实现复杂图形与动画。
HTMLCanvas 是网页中绘制图形的强大工具，通过 JavaScript 控制 canvas 元素，可以绘制线条、形状、文字甚至动画。掌握基础绘图方法是前端可视化、游戏开发等方向的重要一步。
创建 Canvas 画布
使用 canvas 标签在 HTML 中定义绘图区域。需设置宽度和高度，否则默认尺寸较小。
示例代码：<canvas id="myCanvas" width="400" height="300"></canvas>
JavaScript 中通过 getElementById 获取上下文，才能进行绘图操作。
立即学习“前端免费学习笔记（深入）”；
const ctx = document.getElementById('myCanvas').getContext('2d');
绘制基本图形
2D 上下文提供了多种方法来绘制常见图形，以下是几个常用操作。
绘制矩形
- fillRect(x, y, width, height)：绘制实心矩形
- strokeRect(x, y, width, height)：绘制空心边框矩形
- clearRect(x, y, width, height)：清除指定区域
例如：
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 80);
绘制路径（线条与多边形）
通过路径可绘制任意形状。开始路径后，使用 moveTo 和 lineTo 定义点，最后用 stroke 或 fill 渲染。
示例：绘制三角形
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 50);
ctx.lineTo(75, 100);
ctx.closePath();
ctx.stroke();
绘制圆形与弧线
使用 arc() 方法绘制圆或弧。语法为 arc(x, y, radius, startAngle, endAngle, anticlockwise)。
绘制完整圆示例：
ctx.beginPath();
ctx.arc(200, 150, 50, 0, Math.PI * 2);
ctx.stroke();
填充颜色可用 fillStyle，描边用 strokeStyle。
样式与描边设置
绘图前可设置颜色、线宽、透明度等样式。
- ctx.fillStyle = 'red'：设置填充色
- ctx.strokeStyle = 'green'：设置边框色
- ctx.lineWidth = 5：设置线条粗细
- ctx.globalAlpha = 0.5：设置透明度
这些属性应在绘制前设定，否则不会生效。
基本上就这些。熟悉这些基础方法后，可以组合出复杂图形，为进一步学习动画或交互打下基础。不复杂但容易忽略细节，比如 beginPath 的使用和坐标系统的理解。
