在微信小程序的 Canvas 绘图中，可以使用 save 和 restore 方法来保存和恢复绘图上下文的状态。这对于在进行一些变换（如平移、旋转、缩放）之后，需要还原到原始状态时非常有用。

以下是一个简单的示例，演示了如何使用 save 和 restore 方法：
Page({
  onReady: function () {
    const ctx = wx.createCanvasContext('myCanvas');

    // 绘制第一个矩形
    ctx.setFillStyle('red');
    ctx.fillRect(20, 20, 150, 100);

    // 保存绘图上下文的状态
    ctx.save();

    // 平移坐标原点，绘制第二个矩形
    ctx.translate(100, 100);
    ctx.setFillStyle('blue');
    ctx.fillRect(0, 0, 150, 100);

    // 恢复绘图上下文的状态
    ctx.restore();

    // 绘制第三个矩形，与第一个矩形位置相同
    ctx.setFillStyle('green');
    ctx.fillRect(200, 20, 150, 100);

    // 绘制到 canvas 上
    ctx.draw();
  }
});

在这个示例中，我们首先绘制了一个红色的矩形。然后使用 save 方法保存了当前绘图上下文的状态。接着，通过 translate 方法平移了坐标原点，绘制了一个蓝色的矩形。最后，通过 restore 方法恢复了绘图上下文的状态，然后绘制了一个绿色的矩形。由于 restore 恢复了上下文的状态，第三个矩形的位置是相对于初始状态的。

这种方式可以确保在进行一些变换之后，后续的绘制不会受到前面变换的影响，从而更加灵活地控制绘图效果。


转载请注明出处：http://www.zyzy.cn/article/detail/1007/微信小程序