Canvas API是JavaScript绘制2D图形的核心，需先获取2D上下文，再按路径→样式→渲染流程绘图，支持矩形、圆等图形及变换，但为位图且不自动重绘。
用 JavaScript 创建图形，核心是 Canvas API —— 它提供了一套在网页上绘制 2D 图形的底层接口。Canvas 本身是个空白画布（ 元素），真正绘图靠的是通过 JavaScript 获取其 2D 渲染上下文（getContext('2d')），然后调用各种绘图方法。
1. 创建画布并获取绘图上下文
先在 HTML 中定义一个 元素，设置宽高（建议用属性而非 CSS，避免缩放失真）：
接着用 JS 获取上下文对象，这是所有绘图操作的入口：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 必须这一步才能开始画2. 基本绘图操作：路径 + 样式 + 渲染
Canvas 绘图遵循“路径 → 设置样式 → 填充或描边”的流程，不是直接画像素，而是命令式绘图：
立即学习“Java免费学习笔记（深入）”；
- 用
beginPath()开始新路径，避免旧路径干扰 - 用
moveTo(x, y)定位起点，再用lineTo(x, y)、arc()、rect()等添加图形轮廓 - 用
fillStyle和strokeStyle设置填充色和描边色（支持颜色名、十六进制、rgb、rgba） - 调用
fill()填满路径，或stroke()描边路径
例如画一个红色实心圆：
ctx.beginPath(); ctx.arc(200, 150, 50, 0, Math.PI * 2); // 圆心(200,150)，半径50 ctx.fillStyle = '#ff0000'; ctx.fill();
3. 常用图形与变换技巧
除了基础路径，Canvas 还支持快速绘制常见图形：
-
fillRect(x, y, width, height)：绘制填充矩形 -
strokeRect(x, y, width, height)：绘制描边矩形 -
clearRect(x, y, width, height)：清除指定区域（常用于动画重绘） -
save()/restore()：保存和恢复当前绘图状态（如颜色、变换） -
translate(x, y)、rotate(angle)、scale(sx, sy)：做坐标系变换，方便复用图形
4. 注意事项：Canvas 是位图，不自动重绘
Canvas 不像 SVG 那样保留图形对象，它只保存最终像素。一旦画完，就无法直接修改某个图形 —— 想改就得清空重画。
- 动画需手动循环：用
requestAnimationFrame清空 + 重绘 - 交互响应要自己计算坐标（比如点击判断是否在某图形内）
- 高 DPI 屏幕需手动缩放 canvas 内部分辨率，否则图形模糊
基本上就这些。Canvas API 看似简单，但灵活度高，适合游戏、数据可视化、图像处理等场景。从画个圆、矩形开始，逐步组合路径、叠加变换，就能构建出复杂图形。
