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

【问题标题】：clear Canvas when using globalCompositeOperation = 'source-in'使用 globalCompositeOperation = 'source-in' 时清除 Canvas
【发布时间】：2022-01-03 01:27:10
【问题描述】：

我正在带面具的画布上绘制一张脸。面部仅在面具已满的地方才会出现。

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 函数不再起作用。我也尝试过保存和重置，但找不到有效的解决方案。有人可以帮忙吗？谢谢！

【问题讨论】：

标签： javascript canvas globalcompositeoperation

【解决方案1】：

绘制面部后需要重置 globalCompositeOperation。

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

【讨论】：