必须先用 getContext('2d') 获取 CanvasRenderingContext2D 对象才能绘图，否则调用 fillRect 等方法会报错；fillRect 填充矩形，strokeRect 仅描边，二者样式不共享；Canvas 尺寸应通过 width/height 属性设置，而非 CSS；动画中需每帧 clearRect 并合理管理状态。
怎么用 getContext('2d') 获取绘图上下文
不拿到上下文，canvas 标签就是一张白纸，啥也画不了。必须先用 getContext('2d') 才能调用绘图方法。
常见错误：直接对 元素调用 fillRect 或 stroke —— 这会报 TypeError: canvas.fillRect is not a function。
- 确保 DOM 已加载完成，再获取元素（比如放在
DOMContentLoaded里或 script 放在 body 底部） -
getContext('2d')返回的是一个 CanvasRenderingContext2D 对象，所有绘图操作都靠它 - 如果传错参数（如
'webgl'但浏览器不支持），会返回null，记得加判断
画矩形时 fillRect 和 strokeRect 的区别在哪
这两个函数看着像，行为却完全不同：一个填满，一个只描边。
容易踩的坑是混淆默认样式 —— fillRect 默认用黑色实心填充，strokeRect 默认用黑色 1px 描边，但它们**不共享**颜色、线宽等设置。
立即学习“Java免费学习笔记（深入）”；
家电小商城网站源码1.0
下载
家电公司网站源码是一个以米拓为核心进行开发的家电商城网站模板，程序采用metinfo5.3.9 UTF8进行编码，软件包含完整栏目与数据。安装方法：解压上传到空间，访问域名进行安装，安装好后，到后台-安全与效率-数据备份还原，恢复好数据后到设置-基本信息和外观-电脑把网站名称什么的改为自己的即可。默认后台账号：admin 密码：132456注意：如本地测试中127.0.0.1无法正常使用，请换成l
-
fillRect(x, y, width, height)：从 (x,y) 开始画实心矩形 -
strokeRect(x, y, width, height)：只画矩形边框，内部透明 - 改填充色要用
ctx.fillStyle = '#f00'，改描边色要用ctx.strokeStyle = '#00f' - 改线宽必须在
strokeRect前设ctx.lineWidth = 3，否则无效
为什么画了线却看不见？检查这三点
最常见原因不是代码写错，而是 canvas 尺寸和 CSS 尺寸混了。
Canvas 是位图，它的绘制分辨率由 width 和 height 属性决定；而 CSS 的 width/height 只是拉伸显示区域 —— 拉伸后图像会模糊或缩成一团。
- 别用 CSS 设置 canvas 大小，改用 HTML 属性：
- 如果真要响应式，得用 JS 动态同步：读取
canvas.clientWidth，再赋给canvas.width和canvas.height - 画完记得调用
ctx.beginPath()，否则多条路径会连在一起，导致意外连线或填充错乱
requestAnimationFrame 画动画时要注意什么
它不是“让 canvas 动起来”的银弹，只是提供一帧时机；真正动不动，取决于你怎么清屏、重绘、更新状态。
漏掉清屏是最典型问题 —— 每帧都在原图上叠加，结果满屏残影。
- 每帧开头通常要
ctx.clearRect(0, 0, canvas.width, canvas.height) - 避免在循环里反复创建路径对象或临时数组，会触发 GC，卡顿明显
- 如果只是简单移动图形，用
transform（如ctx.translate(x, y)）比重绘整个形状更轻量 -
requestAnimationFrame回调函数接收一个时间戳参数，可用于做匀速运动（而非依赖setInterval）
