Canvas绘图核心在于路径机制，很多人用了一辈子API却不明白底层原理。所有矩形、圆形这些基本图形，本质上都是在往路径集合里添加点，最后统一填充或描边。
路径开始必须调用beginPath
每次开始绘制新图形前都要用beginPath方法清空之前的路径记录。如果不这样做，新路径会和老路径混在一起，填充时整个画布都会出问题。很多初学者忽略这步，结果图形颜色越来越深。
实际开发中见过有人画复杂图表时忘记beginPath，导致每次重绘都叠加几千条路径。页面卡得动不了，内存占用飙升，最后浏览器直接崩溃。这就是路径叠加的恶果。
路径关闭方式有两种选择
closePath方法可以手动封闭路径，从当前点画直线到起点。如果不主动调用，填充时Canvas会自动帮你闭合路径。描边时则不会自动闭合，需要自己控制。
画多边形时这个特性特别有用。比如画三角形时，画完两条边后调用closePath，第三条边自动生成。省去手动计算终点坐标的麻烦，代码也更简洁。
移动画笔与直线绘制
moveTo方法用来移动绘制起点，参数指定新位置。lineTo则从当前点画直线到目标点。这两个是最基础的路径操作，所有复杂图形都由它们组合而成。
在绘制折线图时，通常先用moveTo定位第一个数据点，然后循环调用lineTo连接后续点。起点位置会随着每次画线自动更新，不需要手动维护。
矩形圆弧与曲线绘制
rect方法通过左上角坐标和宽高绘制矩形路径，画完后起点自动移到矩形左上角。arc方法根据圆心和弧度画圆弧，不依赖当前起点。arcTo则画与两条射线相切的圆弧，但浏览器兼容性有问题。
二次贝塞尔曲线quadraticCurveTo有一个控制点，贝塞尔曲线bezierCurveTo有两个控制点。控制点越多曲线调整越灵活，但计算也越复杂。绘制平滑曲线时常用这些方法。
填充描边与剪辑区域
fill填充路径内部，stroke描边路径轮廓。clip设置剪辑区域，之后所有绘制只影响这个区域内部。这在实现刮刮卡效果或局部更新时特别有用。
实现放大镜效果时，先用clip限定圆形区域，然后在区域内绘制放大后的图像。外面保持原样，不需要复杂的像素计算就能实现专业效果。
清除画布的三个方法
clearRect直接清除指定矩形区域，相当于橡皮擦。fillRect填充矩形区域，strokeRect描边矩形边框。这三个方法直接操作像素，不经过路径系统，性能最好。
动画循环中每帧开始都要用clearRect清空画布。如果使用fillRect填充白色矩形来覆盖，虽然也能清空，但会多一次填充操作，影响性能。
Canvas路径系统虽然基础，但掌握后能组合出各种复杂图形。你平时用Canvas时最常遇到什么问题？欢迎在评论区分享经验，点个赞让更多朋友看到这些实用技巧。
