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

我认为有一些方法……

点击发布后重绘所有内容

这很简单但效率不高.

仅重绘已更改的部分

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

使用两个叠加的画布

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