英文:
Why does the Canvas context's save/restore method fail to remove a rectangle?
问题
HTML画布上下文的save/restore方法不起作用。
这里有一个简单的示例，在画布上绘制一个矩形，然后尝试恢复先前的状态，实际上并不起作用。我在这里做错了什么？
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 绘制红色矩形
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);
// 保存当前状态
ctx.save();
// 添加蓝色矩形
ctx.fillStyle = 'blue';
ctx.fillRect(70, 10, 50, 50);
// 恢复保存的状态
ctx.restore(); // 这应该移除蓝色矩形
canvas {
border: 1px solid black;
}
<canvas id="canvas" width="200" height="200"></canvas>
希望这有所帮助。
英文:
HTML Canvas context's save/restore method not working.
There is a simple example of drawing a rectangle on canvas an then trying to restore the previous state, which actually does not work. What am I doing wrong with this ?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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
<!-- language: lang-css -->
canvas {
border: 1px solid black
}
<!-- language: lang-html -->
<canvas id="canvas" width="200" height="200"></canvas>
<!-- end snippet -->
答案1
得分: 1
save 方法会保存绘图状态，但这并不一定包括已绘制的形状。
绘图状态（如MDN上所述）包括：
保存在堆栈上的绘图状态包括：
- 当前变换矩阵。
- 当前剪切区域。
- 当前虚线列表。
- 以下属性的当前值：
strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、lineJoin、
miterLimit、lineDashOffset、shadowOffsetX、shadowOffsetY、shadowBlur、
shadowColor、globalCompositeOperation、font、textAlign、textBaseline、
direction、imageSmoothingEnabled。
您可以通过再次绘制相同的蓝色正方形来查看其效果。您会注意到颜色现在是红色，这意味着状态已恢复到其原始值。
英文:
The save method stores the drawing state, this doesn't necessarily include drawn shapes.
The drawing state is (as stated on MDN):
> The drawing state that gets saved onto a stack consists of:
>
> - The current transformation matrix.
> - The current clipping region.
> - The current dash list.
> - The current values of the following attributes:
> strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin,
> miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur,
> shadowColor, globalCompositeOperation, font, textAlign, textBaseline,
> direction, imageSmoothingEnabled.
You can see this in action by drawing the same blue square again. You will notice the color is now red, meaning the state has reverted to its original values.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
<!-- language: lang-css -->
canvas {
border: 1px solid black
}
<!-- language: lang-html -->
<canvas id="canvas" width="200" height="200"></canvas>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论