答案：HTML5 Canvas通过JavaScript绘制图形，首先创建canvas元素并设置宽高，然后获取2D上下文进行绘图操作。接着使用fillRect、arc、lineTo等方法绘制矩形、圆形和路径，结合beginPath、closePath管理路径状态。最后通过fillStyle、strokeStyle、lineWidth等属性设置颜色和样式，实现基本图形绘制与视觉效果控制。
要在网页中绘制图形，HTML5 Canvas 是一个强大且灵活的工具。它允许你通过 JavaScript 在页面上绘制路径、形状、文本、图像等。下面详细介绍使用 Canvas 绘制图形的基本步骤。
1. 创建 Canvas 元素
在 HTML 文件中插入 <canvas> 标签，并设置其宽度和高度。这个元素相当于一块“画布”，后续所有绘图操作都将在其上进行。
<canvas id="myCanvas" width="400" height="300"></canvas>建议通过 width 和 height 属性设定尺寸，而不是 CSS，因为 CSS 可能会导致图像拉伸失真。
2. 获取 Canvas 上下文
要开始绘图，必须先获取绘图上下文（context）。通常使用 2D 渲染上下文，通过 getContext('2d') 方法获取。
立即学习“前端免费学习笔记（深入）”；
const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');
ctx 是绘图操作的核心对象，所有绘制命令都将通过它执行。
3. 绘制基本图形
Canvas 支持多种基本图形绘制，包括矩形、路径、圆形等。以下是常见图形的绘制方法：
绘制矩形：
- fillRect(x, y, width, height)：绘制一个实心矩形
- strokeRect(x, y, width, height)：绘制一个空心矩形边框
- clearRect(x, y, width, height)：清除指定区域的像素
ctx.fillRect(50, 50, 100, 80); // 实心蓝色矩形
绘制圆形（弧线）：
使用 arc() 方法定义圆弧路径，再用 fill() 或 stroke() 填充或描边。
ctx.beginPath();ctx.arc(200, 150, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
arc 参数依次为：x、y（圆心）、半径、起始角度、结束角度、是否逆时针。
绘制线条与多边形：
通过移动笔触、连线、闭合路径来绘制自定义形状。
ctx.beginPath();ctx.moveTo(100, 50); // 起点
ctx.lineTo(150, 100); // 连线到第二点
ctx.lineTo(50, 100); // 再连线
ctx.closePath(); // 自动连接回起点
ctx.strokeStyle = 'green';
ctx.stroke();
4. 设置样式与颜色
你可以控制图形的外观，包括填充色、边框色、线条宽度、透明度等。
- fillStyle：设置填充颜色（支持十六进制、rgb、rgba、hsl、关键字）
- strokeStyle：设置描边颜色
- lineWidth：设置线条粗细
- globalAlpha：设置整体透明度（0.0 ~ 1.0）
ctx.lineWidth = 3;
基本上就这些。掌握这些基础步骤后，就可以组合出复杂图形、动画甚至小游戏界面。关键在于理解路径的概念和绘图上下文的状态管理。
