javascript 为什么Canvas上下文的保存/restore方法无法删除矩形？

jk9hmnmh 于 2023-06-04 发布在 Java

关注(0)|答案(1)|浏览(229)

HTML Canvas上下文的保存/恢复方法不起作用。
有一个简单的例子，在画布上画一个矩形，然后试图恢复以前的状态，这实际上不起作用。我做错了什么？

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

// Draw red rectangle
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);

// Save the current state
ctx.save();

// Add blue rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(70, 10, 50, 50);

// Restore the saved state
ctx.restore();  // this should remove blue rectangle

canvas {
  border: 1px solid black
}

<canvas id="canvas" width="200" height="200"></canvas>

JavaScript

来源：https://stackoverflow.com/questions/76384377/why-does-the-canvas-contexts-save-restore-method-fail-to-remove-a-rectangle

1条答案

按热度按时间

0dxa2lsx1#

save方法存储绘制状态，这不一定包括绘制的形状。图纸状态为（如MDN所述）：
保存到堆栈中的图形状态包括：

当前变换矩阵。
当前剪辑区域。
当前 Jmeter 板列表。
以下属性的当前值：strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、lineJoin、miterLimit、lineDashOffset、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、globalCompositeOperation、font、textAlign、textBaseline、direction、imageSmoothingEnabled。

您可以通过再次绘制相同的蓝色方块来查看此操作。您会注意到颜色现在是红色，这意味着状态已恢复到其原始值。

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

// Draw red rectangle
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);

// Save the current state
ctx.save();

// Add blue rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(70, 10, 50, 50);

// Restore the saved state
ctx.restore();

// Draw "blue" rectangle again
ctx.fillRect(70, 10, 50, 50);

canvas {
  border: 1px solid black
}

<canvas id="canvas" width="200" height="200"></canvas>

赞(0）回复(0）举报 2023-06-04

我来回答

javascript 为什么Canvas上下文的保存/restore方法无法删除矩形？

1条答案

相关问题

热门标签

最新问答