说明

画布的默认原点为 (0,0)，也就是左上角

translate(x,y)

该方法把当前画布的原点移到 (x,y) 位置，后面的操作都以 该原点 作为参照点，进行定位

例子

<canvas width="400" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
    const canvas = document.querySelector("canvas");
    const ctx = canvas.getContext('2d');

    ctx.beginPath()
    ctx.translate(50,50)
    ctx.strokeStyle="blue"
    ctx.strokeRect(0, 0, 200, 100)
    ctx.closePath()

</script>

问题

平移后，如果想用画布 原始的原点，即：(0,0)，进行定位，就不行了

<canvas width="400" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
    const canvas = document.querySelector("canvas");
    const ctx = canvas.getContext('2d');

    ctx.beginPath()
    ctx.translate(50,50)
    ctx.strokeStyle="blue"
    ctx.strokeRect(0, 0, 200, 100)
    ctx.closePath()

    // 要以左上角为原点，画矩形，是不行的    
    ctx.beginPath()
    ctx.strokeStyle="red"
    ctx.strokeRect(0, 0, 200, 100)
    ctx.closePath()
</script>

分析

在平移前，保存 canvas 的状态，平移、绘画之后，再恢复 canvas 的状态

保存画布状态

save()

恢复画布状态

restore()

解决

平移前，使用 ctx.save() 保存画布状态，本次操作后，用 ctx.restore() 恢复画布 save() 之前的状态，此时原点就恢复为 (0,0)

<canvas width="400" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
    const canvas = document.querySelector("canvas");
    const ctx = canvas.getContext('2d');

    ctx.save()
    ctx.beginPath()
    ctx.translate(50,50)
    ctx.strokeStyle="blue"
    ctx.strokeRect(0, 0, 200, 100)
    ctx.closePath()
    ctx.restore()

    // restore()恢复后，可以以左上角为原点，画矩形
    ctx.beginPath()
    ctx.strokeStyle="red"
    ctx.strokeRect(0, 0, 200, 100)
    ctx.closePath()
</script>

参考：
https://blog.csdn.net/fulianwu/article/details/7001618
https://blog.csdn.net/dayewandou/article/details/78235075

原文出处：/show_1IX8ZGVtBK7n.html