Canvas 不绘制图形，而是提供位图绘图上下文；需用 getContext('2d') 获取并校验非 null；width/height 是像素尺寸，CSS 缩放致模糊；2D 与 WebGL 上下文互斥；绘图遵循状态机：设样式→建路径→fill/stroke；clearRect() 比重置 width/height 更轻量且可控。
Canvas 本身不“绘制图形”，它提供的是一个位图绘图上下文，所有图形都靠调用 getContext('2d') 返回的 2D 渲染上下文方法一笔一划画出来——没有 DOM 节点、没有自动重绘、没有内置坐标系缩放，画完即“冻结”在像素格里。
怎么获取并确认 canvas 可用的 2D 上下文
必须先通过 getContext('2d') 获取上下文对象，且要检查返回值是否为 null（比如浏览器不支持或传错参数）：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
if (!ctx) {
console.error('2D context not supported');
}
-
canvas.width和canvas.height是绘图表面的实际像素尺寸，不是 CSS 样式宽高；设成 0 或未设置会导致ctx无法正常绘图 - 用 CSS 缩放
canvas元素会拉伸像素，造成模糊；如需响应式，应监听窗口变化后重设canvas.width/height并重绘 -
getContext('webgl')或'webgl2'是另一套 API，和 2D 上下文互斥，不能混用
画直线、矩形、圆这些基础图形的关键步骤
Canvas 是状态机模型：设置样式（fillStyle、strokeStyle）、定义路径（beginPath() → 各种 lineTo()/arc()）、再调用 fill() 或 stroke() 才真正上色。漏掉 beginPath() 会导致路径叠加，反复调用 stroke() 会重复描边。
- 画实心矩形：
ctx.fillRect(x, y, width, height)—— 不走路径，直接填充 - 画空心矩形：
ctx.strokeRect(x, y, width, height)—— 同样跳过路径 - 画任意路径（如三角形、多边形）：
ctx.beginPath()→ctx.moveTo()→ctx.lineTo()×n →ctx.closePath()→ctx.fill()或ctx.stroke() - 画圆：
ctx.arc(x, y, radius, startAngle, endAngle)，角度单位是弧度；画实心圆记得加ctx.fill()
为什么 clearRect() 比重置 width/height 更常用
清空画布最常用的是 ctx.clearRect(0, 0, canvas.width, canvas.height)，而不是反复设置 canvas.width = canvas.width（虽然这也有效）：
睿拓智能网站系统-睿拓企业网站系统1.2免费版软件大小:6M运行环境：asp+access本版本是永州睿拓信息企业网站管理系统包括了企业网站常用的各种功能，带完整的后台管理系统，本程序无任何功能限制下载即可使用，具体功能如下。1.网站首页2.会员注册3.新闻文章模块4.产品图片展示模块5.人才招聘模块6.在线留言模块7.问卷调查模块8.联系我们模块9.在线QQ客服系统10.网站流量统计系统11.后
立即学习“Java免费学习笔记（深入）”；
-
clearRect()只清指定区域，不影响 canvas 元素的width/height属性，适合局部擦除或动画中保留部分画面 - 重设
canvas.width会重置整个上下文状态（包括所有样式、变换、裁剪路径），开销更大，且可能意外丢弃你手动保存的ctx.save()状态 - 如果 canvas 已应用 CSS transform，
clearRect()仍按逻辑像素操作，而重设 width/height 会强制重绘整个位图，可能触发额外布局计算
Canvas 的“难”不在语法，而在它把所有控制权交给你：坐标系原点在左上角、没有图层概念、抗锯齿开关依赖 imageSmoothingEnabled、文字测量靠 ctx.measureText() 手动对齐——稍不注意，画出来的线就偏半像素、文字就糊成一片。
