Canvas通过JavaScript绘制图形，先创建canvas元素并获取2D上下文，再用fillRect、arc、stroke等方法绘图，结合fillStyle、font、drawImage设置样式与图像，利用requestAnimationFrame实现动画，需注意清屏和路径重置。
HTML5 中的 Canvas 是一个强大的绘图 API，允许你在网页上绘制图形、文本、图像，甚至动画。它本质上是一个空白的矩形区域，通过 JavaScript 控制其上下文进行绘图。
1. 创建 Canvas 元素
在 HTML 文件中使用 <canvas> 标签定义一个绘图区域。建议设置 width 和 height 属性，否则默认为 300x150 像素。
<canvas id="myCanvas" width="500" height="300"></canvas>这个元素本身不会显示任何内容，需要通过 JavaScript 获取上下文来绘图。
2. 获取绘图上下文
Canvas 绘图必须通过 JavaScript 操作。使用 getContext() 方法获取 2D 渲染上下文，这是绘图的基础。
立即学习“前端免费学习笔记（深入）”；
const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');
ctx 就是你后续调用所有绘图方法的对象。
3. 绘制基本图形
有了上下文后，可以开始绘制形状。以下是几种常见操作：
绘制矩形：
- ctx.fillRect(x, y, width, height)：绘制实心矩形
- ctx.strokeRect(x, y, width, height)：绘制空心边框矩形
- ctx.clearRect(x, y, width, height)：清除指定区域
示例：
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 80); // 蓝色实心矩形
绘制路径（如线条、三角形）：
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- ctx.beginPath()：开始新路径
- ctx.moveTo(x, y)：移动画笔到某点
- ctx.lineTo(x, y)：画线到指定点
- ctx.stroke()：描边路径
- ctx.fill()：填充路径
示例：画一条线
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
4. 绘制圆形和弧线
使用 arc() 方法绘制圆或弧。
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);- x, y：圆心坐标
- radius：半径
- startAngle 到 endAngle：起始和结束角度（弧度制）
示例：画一个完整的圆
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();
5. 设置样式和颜色
你可以自定义线条和填充的外观：
- ctx.fillStyle = 'red'：设置填充颜色
- ctx.strokeStyle = 'green'：设置描边颜色
- ctx.lineWidth = 5：设置线条宽度
- ctx.lineCap = 'round'：线条端点样式
6. 绘制文本
Canvas 支持绘制文本内容：
- ctx.fillText("Hello", x, y)：绘制实心文字
- ctx.strokeText("Hello", x, y)：绘制空心文字
可用 font 属性设置字体样式：
ctx.font = '20px Arial';7. 绘制图像
使用 drawImage() 方法将图片绘制到 Canvas 上。
const img = new Image();img.src = 'image.png';
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
注意：必须等图片加载完成后再绘制，否则可能不显示。
8. 简单动画示例
结合 requestAnimationFrame() 可实现动画效果。
let x = 0;function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 100, 50, 50);
x += 2;
if (x > canvas.width) x = 0;
requestAnimationFrame(animate);
}
animate();
这段代码让一个方块从左向右移动，超出边界后回到起点。
基本上就这些。掌握以上基础后，你可以尝试更复杂的图形、渐变、阴影、变换（rotate、scale）等高级功能。Canvas 不复杂但容易忽略细节，比如清屏、路径重置和单位转换。多练习几个小项目，很快就能上手。
