我正在使用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);
使用两个叠加的画布
第二个画布位于第一个画布上,将保持红色矩形和白色文本,并在您想要“恢复”原始图像时清除.