Canvas是HTML5提供的原生绘图接口，需先创建元素并获取2D上下文；再用fillRect/strokeRect/clearRect绘制矩形；通过beginPath/moveTo/lineTo/stroke/fill绘制路径；用arc绘制圆弧；最后用fillStyle/strokeStyle等设置样式。
如果您希望在网页中实现动态图形绘制，Canvas 是 HTML5 提供的原生绘图接口。以下是使用 Canvas 进行基础绘图的操作步骤：
一、创建 Canvas 元素并获取上下文
Canvas 绘图依赖于 标签和其 2D 渲染上下文对象。页面中必须先声明画布元素，并通过 JavaScript 获取绘图环境。
1、在 HTML 文件中插入 标签。
2、使用 document.getElementById("myCanvas") 获取该元素。
立即学习“前端免费学习笔记（深入）”；
3、调用 getContext("2d") 方法获取 2D 绘图上下文对象，赋值给变量如 ctx。
二、绘制矩形图形
Canvas 提供了三种矩形绘制方式：填充矩形、描边矩形和清除矩形。它们均以左上角坐标为起点，按宽高定义区域。
1、使用 ctx.fillRect(x, y, width, height) 绘制实心矩形，例如 ctx.fillRect(10, 10, 100, 50)。
2、使用 ctx.strokeRect(x, y, width, height) 绘制边框矩形，不填充内部。
3、使用 ctx.clearRect(x, y, width, height) 清除指定区域像素，常用于动画帧擦除。
三、绘制路径与线条
复杂图形需通过路径（Path）构建，路径由多个子路径组成，支持直线、曲线、圆弧等基本几何操作。
1、调用 ctx.beginPath() 开始新路径，避免与前序路径意外连接。
2、使用 ctx.moveTo(x, y) 设置起始点，再用 ctx.lineTo(x, y) 添加直线段。
3、调用 ctx.stroke() 描边路径，或 ctx.fill() 填充闭合路径内部。
四、绘制圆形与圆弧
Canvas 使用 arc() 方法绘制圆弧，通过控制起始角、终止角和方向可生成完整圆或扇形。
1、调用 ctx.arc(centerX, centerY, radius, startAngle, endAngle, anticlockwise) 定义圆弧。
2、角度单位必须为弧度，而非度数；可使用 Math.PI / 180 * 度数 转换。
3、绘制完整圆时，startAngle 设为 0，endAngle 设为 Math.PI * 2。
五、设置绘图样式与颜色
Canvas 的视觉效果由上下文属性控制，包括填充色、描边色、线宽、透明度等，需在绘制前设定。
1、设置填充颜色：ctx.fillStyle = "#ff6b35" 或 ctx.fillStyle = "rgb(255, 107, 53)"。
2、设置描边颜色：ctx.strokeStyle = "blue"，同时用 ctx.lineWidth = 2 控制线宽。
3、所有样式设置必须在调用 fill() 或 stroke() 之前完成，否则无效。
