必须在 dom 加载后获取 canvas.getcontext('2d')，否则返回 null 导致白屏；移动端需注意 ios safari 渲染时机、touch 事件取 touches[0]、坐标校正、缩放处理；绘图应累积路径再 stroke，避免频繁 clearrect；导出图片须设 canvas 像素宽高而非仅 css，且图片需跨域授权。
canvas.getContext('2d') 必须在 DOM 加载后获取
直接在 <script></script> 标签里写 document.getElementById('myCanvas').getContext('2d') 但 canvas 元素还没解析到 DOM，结果是 null —— 这是最常见的白屏/无响应原因。
- 用
DOMContentLoaded包裹初始化逻辑，或把 script 放在 body 底部 - 别信“DOM 就绪了”，用
console.log(canvas)确认 canvas 元素存在且非null - 移动端还要注意：iOS Safari 在页面未完全渲染前调用
getContext可能返回空对象（尤其配合display: none切换时）
鼠标/触控事件坐标要减去 canvas 偏移量
event.clientX 和 event.clientY 返回的是相对于视口的坐标，而 canvas 绘图坐标系原点在左上角，且受 CSS 缩放、外边距、滚动影响。不校正就画歪、断线、偏移。
- 用
canvas.getBoundingClientRect()获取实时位置，再做减法：const rect = canvas.getBoundingClientRect(); const x = event.clientX - rect.left; - 移动端必须同时监听
touchstart/touchmove，且取touches[0]而非changedTouches[0]（后者只含本次变化点，容易漏帧） - 如果 canvas 有
transform: scale(1.5)，记得除以缩放系数，否则线条粗细和位置全乱
requestAnimationFrame 里清空路径，别用 clearRect 反复擦
涂鸦不是逐帧动画，但频繁调用 clearRect 擦整个画布 + 重绘所有历史笔迹，会导致卡顿，尤其在低端 Android 设备上明显掉帧。
易优cms汽车车辆租赁源码1.7.2
下载
由于疫情等原因大家都开始习惯了通过互联网上租车服务的信息多方面，且获取方式简便，不管是婚庆用车、旅游租车、还是短租等租车业务。越来越多租车企业都开始主动把租车业务推向给潜在需求客户，所以如何设计一个租车网站，以便在同行中脱颖而出就重要了，易优cms针对租车行业市场需求、目标客户、盈利模式等，进行策划、设计、制作，建设一个符合用户与搜索引擎需求的租车网站源码。 网站首页
- 正确做法是：只在
mousedown/touchstart记录起点，在mousemove/touchmove中用lineTo追加路径，requestAnimationFrame里仅执行一次stroke() - 不要在每次移动事件里调用
beginPath()—— 这会让每段都变成独立短线；应该在按下时调一次，抬起时再调一次 - 若需橡皮擦效果，别改 globalCompositeOperation 后清屏；更稳的方式是把历史笔迹存为数组，擦除时 splice 掉对应段，重绘剩余路径
toDataURL 导出图片时注意跨域和尺寸失真
调用 canvas.toDataURL('image/png') 得到 base64 字符串，但常遇到导出空白、模糊或比例不对 —— 多数是 canvas 的 CSS width/height 和实际像素宽高不一致导致的。
立即学习“前端免费学习笔记（深入）”；
- 务必显式设置 canvas 的
width和height属性（不是 CSS 样式），例如：<canvas width="800" height="600"></canvas> - 如果用 CSS 缩放适配响应式，导出前临时把 canvas 属性设为大尺寸（如 1600×1200），绘图后再缩放回原尺寸显示，否则导出图就是模糊的 400×300 像素
- canvas 里用了
drawImage加载外部图片？确保图片已跨域允许（img.crossOrigin = 'anonymous'），否则toDataURL抛SecurityError
事情说清了就结束
