HarmonyOS鸿蒙Next中js UI画布组件CanvasRenderingContext2D提供的restore方法使用

HarmonyOS鸿蒙Next中js UI画布组件CanvasRenderingContext2D提供的restore方法使用

js UI画布组件CanvasRenderingContext2D 提供的 restore方法使用?

最近想用js UI画布组件 画图实现一些效果

参考了官方文档关于CanvasRenderingContext2D 的说明 https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-canvas-canvasrenderingcontext2d-0000000000621823#ZH-CN_TOPIC_0000001058830807__section64027684817

问题说明

打算使用CanvasRenderingContext2D 的 save()方法 保存之前画好的内容

然后再画一些内容 临时的内容

然后想用 restore方法,恢复到上次保存的位置, 即(清除临时画的内容)

结果显示restore调用后,想清除的临时内容未清除掉

js代码如下:

this.ctx = this.$refs.canvas1.getContext('2d');
this.ctx.font = '42px sans-serif';
this.content = "restore(), fillText 绘制填充类文本";

// 绘制填充类文本
this.ctx.fillText(this.content,0,42);

this.ctx.save(); // 保存方便恢复

// 填充一个矩形
this.ctx.fillRect(0 , 0 , 200, 42);

// 恢复到上一次保存位置
this.ctx.restore()

问题

上面js代码运行后 : 填充的矩形仍然存在,并没有实现恢复到上一次保存的位置

不知是我对restore使用不对, 还是该方法没效果;

由于官方文档中的restore 示例比较简单,希望有清楚的同学帮忙解答一下


更多关于HarmonyOS鸿蒙Next中js UI画布组件CanvasRenderingContext2D提供的restore方法使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复 
您好，您这个理解错误了，save()保存的只是CanvasRenderingContext2D对象的状态以及对象的所有属性，并不包括这个对象上绘制的图形,所以restore不会清除保存之前所画的内容，而是恢复到保存之前的旋转，缩放等之后的状态，可以参考以下记录旋转状态的代码

```js
handleClick(){
    const el = this.$refs.canvas1;
    this.ctx = el.getContext('2d');
    this.ctx.beginPath();
    this.ctx.arc(100, 75, 50, 0, 6.28);
    this.ctx.stroke();

    this.ctx.save();//保存时目前的旋转缩放等的状态

    this.ctx.beginPath();
    this.ctx.rotate(45 * Math.PI / 180);
    this.ctx.fillRect(70, 20, 50, 50);

    this.ctx.beginPath();
    this.ctx.moveTo(35,50);
    this.ctx.lineTo(135,50);
    this.ctx.stroke();
},
restoreClick(){
    this.ctx.restore();
    this.ctx.fillRect(100,50,50,50);
    this.ctx.beginPath();
    this.ctx.moveTo(35,30);
    this.ctx.lineTo(135,30);
    this.ctx.stroke();
}

上述代码保存的旋转角度为0，保存之后旋转角度是45度，如果你把restore方法注释掉，那么还是从45度开始画，可以自己测试一下就知道了

更多关于HarmonyOS鸿蒙Next中js UI画布组件CanvasRenderingContext2D提供的restore方法使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢 知道了  

目前通过修改了实现方式 并通过`ctx.clearRect(x, y, width, height);`实现了想要的清除效果

开发者你好，

您的问题已经为您转相关人员待处理中，有回复后我们会及时同步。

同时欢迎论坛开发小伙伴们互帮互助…

感谢您对开发者论坛的支持!!

在HarmonyOS鸿蒙Next中，CanvasRenderingContext2D的restore方法用于恢复之前保存的绘图状态。绘图状态包括当前的变换矩阵、裁剪区域、样式属性（如颜色、线宽等）等。restore方法通常与save方法配对使用，save方法用于保存当前的绘图状态，而restore方法则用于恢复到最近一次保存的状态。

使用restore方法时，系统会从绘图状态栈中弹出最近保存的状态，并将其应用到当前的绘图上下文中。绘图状态栈是一个后进先出（LIFO）的结构，每次调用save方法都会将当前状态压入栈中，而每次调用restore方法则会从栈中弹出一个状态。

例如，在绘制图形时，可以先调用save方法保存当前状态，然后进行一些变换或样式修改，绘制完成后，再调用restore方法恢复到之前保存的状态，以便继续使用原始的绘图设置。

const ctx = canvas.getContext('2d');

// 保存当前状态
ctx.save();

// 修改绘图状态
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

// 恢复到之前保存的状态
ctx.restore();

// 继续使用原始的绘图设置
ctx.fillRect(150, 10, 100, 100);

在上述代码中，restore方法将绘图状态恢复到调用save方法时的状态，因此第二个矩形的填充颜色将不再是红色，而是恢复到之前的状态。

在HarmonyOS鸿蒙Next中，CanvasRenderingContext2D的restore方法用于恢复之前保存的绘图状态。通过save方法保存的绘图状态（如变换矩阵、裁剪区域、样式等）可以通过restore方法恢复到之前的状态。使用restore时，会从状态栈中弹出最近保存的状态，并应用到当前绘图上下文中。通常与save方法配对使用，以确保在修改绘图状态后能够恢复到之前的状态。

回到顶部