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

Question

我使用HTML5 canvas如下:

1. 显示填充画布区域的图像.
2. 在图像上显示黑色文本标签.
3. 单击文本标签时,通过绘制填充的红色矩形+白色文本突出显示它.

我有那部分一切正常.现在我想要做的是删除红色矩形并恢复原来在它后面的图像背景.我是画布的新手并且阅读了相当数量,但是我看不出怎么做.那说我相信它一定很简单.

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);

使用两个叠加的画布

第二个画布位于第一个画布上,将保持红色矩形和白色文本,并在您想要"恢复"原始图像时清除.