ctx.save 对canvas

`ctx.save()` 是 Canvas API 中的一个重要方法，它用于保存当前图形上下文的状态。在绘制过程中，如果需要执行一些操作，比如变换、颜色设置等，先调用 `save()` 可以将当前的状态记录下来，然后可以继续进行其他操作，等所有需要的操作完成后，再使用 `restore()` 恢复到之前的保存状态。这样做的好处是可以方便地控制复杂图形的绘制流程，避免因为临时的修改导致后续操作受到影响。

简单来说，当你想在当前绘制的基础上做一些局部调整，而又希望保持原始状态以便后续恢复，就可以使用 `save()` 来保护之前的状态。例如：

ctx.beginPath(); // 开始路径
ctx.arc(50, 50, 30, 0, Math.PI*2); // 画一个圆

// 先保存状态
ctx.save();

// 进行旋转
ctx.translate(70, 0);
ctx.rotate(Math.PI / 4);

// 画另一个圆，会受到旋转影响
ctx.arc(50, 50, 30, 0, Math.PI*2);

// 操作结束，恢复到之前的状态
ctx.restore();

相关问题

ctx.save() canvas 画个矩形

### 使用 `ctx.save()` 绘制矩形

在 HTML5 Canvas 中，`ctx.save()` 方法用于保存当前的绘图状态到一个堆栈中。这包括所有的样式属性和变换矩阵。当需要恢复之前的状态时，可以通过调用 `ctx.restore()` 来实现。

下面是一个完整的例子来展示如何设置矩形的颜色、阴影以及保存这些设置：

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

// 设置填充颜色和其他样式属性
ctx.fillStyle = '#FA6900';
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(10, 10, 15, 150);
ctx.save(); // 将当前状态压入堆栈[^1]

// 可以继续在此之后绘制其他形状而不影响已保存的状态...

这段代码首先配置了上下文对象的各种属性，如填充颜色和阴影效果，并使用 `fillRect()` 函数绘制了一个橙色带阴影的小矩形。接着调用了 `save()` 方法把此时的绘图环境存起来以便稍后能够返回到这里的状态。

如果想要进一步操作而不想改变原始设定，则可以在后续的操作前再次调用 `save()` 并在完成特定工作后通过 `restore()` 返回之前的某个保存点。

import QtQuick 2.4 import QtQuick.Controls 2.5 import QtQuick.Window 2.3 ApplicationWindow { visible: true width: 800 height: 600 title: "Drawing Board Example" Rectangle { width: 600 height: 400 Canvas { id: canvas anchors.fill: parent onPaint: { // 设置画布初始位置和网格线样式 ctx.translate(width / 2, height / 2); ctx.lineWidth = 0.5; ctx.strokeStyle = '#ddd'; // 绘制网格线 for (let i = -width / 2; i <= width / 2; i += 10) { ctx.beginPath(); ctx.moveTo(i, -height / 2); ctx.lineTo(i, height / 2); ctx.stroke(); } for (let i = -height / 2; i <= height / 2; i += 10) { ctx.beginPath(); ctx.moveTo(-width / 2, i); ctx.lineTo(width / 2, i); ctx.stroke(); } let isDragging = false; let rect = { x: 0, y: 0, width: 100, height: 100, angle: 0 }; // 绘制矩形 function drawRect() { ctx.clearRect(-width / 2, -height / 2, width, height); ctx.save(); ctx.translate(rect.x, rect.y); ctx.rotate(rect.angle); ctx.fillRect(-rect.width / 2, -rect.height / 2, rect.width, rect.height); ctx.restore(); } // 鼠标事件处理 canvas.mousePressEvent.connect(function (e) { const x = e.x - width / 2; const y = e.y - height / 2; if (x > rect.x - rect.width / 2 && x < rect.x + rect.width / 2 && y > rect.y - rect.height / 2 && y < rect.y + rect.height / 2) { isDragging = true; } }); canvas.mouseMoveEvent.connect(function (e) { if (isDragging) { const x = e.x - width / 2; const y = e.y - height / 2; rect.x = x; rect.y = y; drawRect(); } }); canvas.mouseReleaseEvent.connect(function () { isDragging = false; }); canvas.wheelEvent.connect(function (e) { const zoom = e.angleDelta.y() > 0 ? 0.9 : 1.1; rect.width *= zoom; rect.height *= zoom; drawRect(); }); canvas.contextMenuEvent.connect(function (e) { e.accepted = true; rect.angle += Math.PI / 4; drawRect(); }); drawRect(); } } } }在这段代码中采用了上述的需求实现方法，但是在运行时，所有的需求都没能够完成，其中警告信息为var "i"used before its declaration. "i" is declarad more than once.报错信息为ReferenceError: ctx is not defined。应该如何修改这段代码使其能够正常完成需求

这段代码中的警告信息是因为变量i被重复声明了，可以将第二个for循环中的let改为var，或者将第一个for循环中的let改为var，这样就不会再出现警告信息了。

而报错信息是因为ctx变量在onPaint函数之前未被定义，需要在Canvas标签中添加一个contextType属性，指定ctx的类型。可以将Canvas标签改为如下代码：

Canvas {
    id: canvas
    anchors.fill: parent
    contextType: "2d"
    onPaint: {
        // 以下为onPaint函数的代码
    }
}

这样就能够正常定义ctx变量了。