javascript - 使用 globalCompositeOperation = 'source-in' 时清除 Canvas

Question

我正在带面具的画布上画一张脸。仅在面罩已满的情况下，脸部才会出现。

function drawface(){ this.ctx.globalCompositeOperation = 'source-in';
    this.ctx.drawImage(msk, 0, 0, msk_w, msk_w, x, marg, h_c, h_c );
    this.ctx.drawImage(this.face, 0, 0, w_f, h_f, x+x_offset, marg+y_offset, h_c, h_c);}

它工作正常，但我想在拖动时移动脸部。所以我需要重置画布，然后重新绘制脸部。但是当我这样做时

function resetCanvas(){
    this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
    }
    

我得到一个空白画布，并且在调用 resetCanvas 后 drawface 函数不再起作用。我也尝试过保存和重置，但找不到有效的解决方案。有人可以帮忙吗？谢谢 ！

Answer 1

绘制面部后需要重置 globalCompositeOperation。

this.ctx.globalCompositeOperation = 'source-over';