canvas渲染溢出的根源在于其独立于css层叠上下文的原生渲染机制，尤其在微信小程序中层级高于普通view，且web端坐标变换后超出安全区的像素仍会显示。
Canvas渲染溢出的根源在哪
Canvas本身不参与CSS层叠上下文，尤其在微信小程序中，它作为原生组件独立渲染，层级天然高于普通view。这意味着即使父容器设置了overflow: hidden，canvas绘制的内容仍可能“穿透”边界，在页面滚动时遮挡其他元素。Web端虽支持CSS裁剪，但一旦涉及旋转、缩放或坐标系变换，超出安全区的像素仍会显示出来——这不是bug，而是Canvas底层渲染机制决定的。
三层边界防护策略
单靠CSS或单次清空画布无法根治溢出。必须从容器、绘制逻辑、坐标计算三方面协同控制：
- CSS容器层：给canvas外层包裹div设position: relative和overflow: hidden，为后续定位与裁剪提供上下文；canvas自身设display: block消除行内默认间距
- 绘制安全区：定义统一padding（如{top:20, right:20, bottom:30, left:50}），所有图形宽高、坐标起点均基于chartWidth = width - left - right等推导值计算
- 坐标截断校验：对每个待绘制点显式约束，例如x = Math.max(padding.left, Math.min(width - padding.right, x))，避免因浮点误差或动态计算导致越界
旋转/缩放场景下的防溢出要点
绕中心旋转时，直接ctx.rotate()会以(0,0)为原点，极易让图形飞出画布。正确做法是：
- 先ctx.save()保存状态
- 用ctx.translate(cx, cy)将坐标系原点移到目标中心（如图形中心）
- 再ctx.rotate(angle)，此时旋转轴即为中心点
- 绘制时把图形“居中”放在(0, 0)附近（如fillRect(-w/2, -h/2, w, h)）
- 最后ctx.restore()还原，防止影响后续绘制
同时，每次clearRect或fillRect清空背景，必须覆盖整个canvas尺寸（0, 0, canvas.width, canvas.height），否则残留像素会叠加形成视觉溢出。
文本描边与尖角伪影处理
当使用粗描边（lineWidth > 10）配合尖角字体（如Impact）时，Canvas默认的lineJoin = 'miter'会导致描边在拐角处无限延伸，形成刺状溢出。解决方法是主动设置ctx.miterLimit = 2或3，强制斜接长度超过描边宽度2倍时自动切换为bevel连接，视觉更干净。记得在描边前设置，且该值需根据字体和字号微调。
