必须调用getcontext("2d")才能绘图，否则所有绘图方法静默失效；canvas必须用html width/height属性设置尺寸，不可仅靠css；高dpi需动态适配devicepixelratio并调用ctx.scale；beginpath()是路径隔离必要步骤，漏写会导致意外连线；样式设置须在绘图命令前生效；动画需手动clearrect()清屏防拖影。
getContext("2d") 必须调用，否则所有绘图方法静默失效——控制台不报错，图形也不出现，这是最常被卡住的地方。
Canvas元素必须带width和height属性，不能只靠CSS
HTML中写成 <canvas id="myCanvas" width="400" height="300"></canvas> 才对。如果只用CSS设置尺寸，比如 style="width:400px;height:300px"，画布的像素网格仍保持默认（300×150），导致图形被拉伸、坐标错位、线条模糊。高分屏下问题更明显：1px线可能渲染成2px宽的虚边。
响应式场景下，得用JS动态重设：
- 读取父容器尺寸，赋值给
canvas.width和canvas.height - 再调用
ctx.scale(dpr, dpr)补偿设备像素比（dpr = window.devicePixelRatio） - 最后重绘内容——缩放不是CSS变换，它改变的是底层绘图坐标系
beginPath() 不是可选操作，而是路径隔离的必要步骤
Canvas的路径是累积的。漏掉 beginPath()，lineTo() 或 arc() 会从上一个图形的终点继续连过去，画三角形变成Z字折线，画多个圆变成一串连线的椭圆链。
例外情况：fillRect()、strokeRect()、clearRect() 是原子操作，不依赖路径，无需 beginPath()。
建议习惯：
- 每次准备画新路径前，先写
ctx.beginPath() - 画多边形时，显式加
ctx.closePath()，避免自动闭合出意外夹角 - 不需要路径时（比如只画文字或图片），跳过这步也没问题
样式设置顺序决定是否生效
fillStyle、strokeStyle、lineWidth、font 这些是“当前状态”，只影响之后的绘图命令。把 ctx.fillStyle = "red" 写在 ctx.fillRect(0,0,100,100) 后面？这次填充就是默认黑色，不会变红。
常见配对关系：
-
fillRect()、fill()、fillText()读取fillStyle -
strokeRect()、stroke()读取strokeStyle和lineWidth -
fillText()前必须设ctx.font，否则用浏览器默认字体，大小不可控
真正容易被忽略的点是：Canvas没有“重绘缓存”——每次修改都要手动 clearRect() 清旧内容，再画新内容；动画里漏清屏，就会拖影。这不是bug，是设计使然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
