html - 保存/恢复 HTML5 Canvas 的背景区域

Question

我正在使用 HTML5 Canvas ，如下所示:

1. 显示一张填满 Canvas 区域的图片。
2. 在图片上显示黑色文本标签。
3. 单击文本标签时，通过绘制填充的红色矩形 + 白色文本来突出显示它。

我的那部分工作正常。现在我想做的是删除红色矩形并恢复原来在它后面的图像背景。我是 canvas 的新手并且已经阅读了相当多的内容，但是我不知道该怎么做。也就是说，我相信它一定非常简单。

Answer 1

我认为有一些方法...

点击释放后重绘所有内容

这很简单，但效率不高。

只重绘改变的部分

带有 9 个参数的 drawImage 仅重绘改变的背景图像部分，然后重绘黑色文本。

点击前保存图片数据，然后恢复

这使用 2D 上下文的 getImageData 和 putImageData。 (虽然不确定它是否得到广泛实现。)

这里是规范:

ImageData getImageData(in double sx, in double sy, in double sw, in double sh);
void putImageData(in ImageData imagedata, in double dx, in double dy, in optional double dirtyX, in double dirtyY, in double dirtyWidth, in double dirtyHeight);

因此，例如，如果更改的部分位于从 (20,30) 到 (180,70) 像素的矩形内，只需执行以下操作:

var ctx = canvas.getContext("2d");
var saved_rect = ctx.getImageData(20, 30, 160, 40);
// highlight the image part ...

// restore the altered part
ctx.putImageData(saved_rect, 20, 30);

使用两个叠加的 Canvas

位于第一个 Canvas 上方的第二个 Canvas 将包含红色矩形和白色文本，当您想要“恢复”原始图像时将被清除。