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

Question

我正在使用HTML5画布，如下所示：

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

使用两个叠加的画布

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

Answer 2

对于另一个Stack Overflow question，我创建了一个展示如何save and restore a section of a canvas的示例。总结：

function copyCanvasRegionToBuffer( canvas, x, y, w, h, bufferCanvas ){
  if (!bufferCanvas) bufferCanvas = document.createElement('canvas');
  bufferCanvas.width  = w;
  bufferCanvas.height = h;
  bufferCanvas.getContext('2d').drawImage( canvas, x, y, w, h, 0, 0, w, h );
  return bufferCanvas;
}

Answer 3

function draw(e){
    ctx.drawImage(img, 0, 0);
    if(e){
        ctx.fillStyle='red';
        ctx.fillRect(5, 5, 50, 15);
        ctx.fillStyle='white';
    }else{
        ctx.fillStyle='black';
    }
    ctx.fillText('Label', 10, 17);
}
draw();
document.onclick=draw;