CanvasContext.restore

解释:恢复之前保存的绘图上下文。

方法参数

示例

扫码体验

CanvasContext.restore - 图1请使用百度APP扫码

图片示例

图片

代码示例1

在开发者工具中预览效果

  1. const canvasContext = swan.createCanvasContext('myCanvas');
  2. // 保存默认填充样式
  3. canvasContext.save();
  4. canvasContext.setFillStyle('blue');
  5. canvasContext.fillRect(10, 10, 150, 100);
  6. // 恢复到以前保存的状态
  7. canvasContext.restore();
  8. canvasContext.fillRect(50, 50, 150, 100);
  9. canvasContext.draw();

图片示例

CanvasContext.restore - 图3

CanvasContext.restore - 图4

CanvasContext.restore - 图5

代码示例2

在开发者工具中预览效果

  1. Page({
  2. onLoad() {
  3. const ctx = swan.createCanvasContext('myCanvas');
  4. ctx.setFillStyle('blue');
  5. ctx.fillRect(0,0,15,15);
  6. ctx.save(); //保存上述设置的绘制状态
  7. //重新定义新的绘制状态,并绘制矩形
  8. ctx.setFillStyle('#E0E4CD');
  9. ctx.setShadow(10, 10, 4, 'red');
  10. ctx.fillRect(30,0,30,30);
  11. // 恢复到初始的绘制状态绘制圆形,与save()之前画的图保持一致
  12. ctx.restore();
  13. ctx.beginPath();
  14. ctx.arc(100, 75, 8, 0, Math.PI*2, true);
  15. ctx.closePath();
  16. ctx.fill();
  17. ctx.draw()
  18. }
  19. });