乐闻世界logo
5月29日 01:55

Canvas 路径绘制和图形变换怎么用？

路径绘制分三步：定义路径、闭合路径、渲染路径。先用 beginPath() 清除旧路径，moveTo() 定起点，再用 lineTo()/arc()/bezierCurveTo() 等绘制子路径，最后 closePath() 闭合并用 fill() 或 stroke() 渲染。图形变换通过坐标系变换实现：translate(x,y) 平移原点、rotate(angle) 绕原点旋转、scale(sx,sy) 缩放，transform(a,b,c,d,e,f) 直接设置变换矩阵。变换是累积的，用 save()/restore() 管理状态栈，避免污染后续绘制。

追问

  • beginPath() 和 closePath() 的区别是什么？不调用 closePath() 会怎样？
  • save()/restore() 保存了哪些状态？变换矩阵和路径都会保存吗？
  • transform() 和 setTransform() 有什么区别？
  • 多次 translate() 后坐标系如何变化？如何回到初始状态？
  • 如何用贝塞尔曲线绘制平滑曲线？控制点怎么选？

写段代码

js
ctx.save()
ctx.translate(150, 150)   // 移动原点到画布中心
ctx.rotate(Math.PI / 6)   // 旋转30度
ctx.fillStyle = 'tomato'
ctx.fillRect(-40, -40, 80, 80)  // 以新原点为中心绘制
ctx.restore()              // 恢复原始坐标系
标签：Canvas