Canvas绘制路径后调用translate方法无效的技术求助

你的问题出在Canvas变换的执行顺序上：translate() 这类变换方法只会对之后的绘图操作生效，而你是先定义了路径（moveTo/lineTo），再调用translate，这时候路径已经基于原始坐标系创建完成，变换不会影响已存在的路径。

解决方法：调整变换与路径定义的顺序 #

把translate()放到路径定义（beginPath、moveTo、lineTo）之前，让变换先作用于坐标系，再在变换后的坐标系上绘制路径：

const ctx = canvas.getContext('2d')
const render = () => {
    ctx.resetTransform()
    ctx.clearRect(0, 0, innerWidth, innerHeight)
    
    ctx.translate(1000, 100) // 先执行变换，修改坐标系
    ctx.beginPath()
    ctx.moveTo(30, 50)
    ctx.lineTo(150, 100)
    ctx.strokeStyle = 'red'
    ctx.stroke()
}
render()

另一种思路：变换已绘制的路径（适合复杂路径） #

如果你的路径已经预先定义好（比如从外部获取的路径数据），不想调整顺序，可以通过手动偏移路径坐标，或者使用ctx.transform()对已有的路径矩阵进行修改。不过最简洁高效的方式还是优先调整变换的执行顺序。

内容的提问来源于stack exchange，提问作者Meysam Ghorbani