在绘制填充的矩形后清除ctx.fillStyle

Question

在绘制填充的矩形后清除ctx.fillStyle并不起作用...

我试过了：

• ctx.globalCompositeOperation = 'destination-out';
• ctx.clearRect(0, 0, canvas.width, canvas.height);清除画布本身
• ctx.fillStyle = "rgba(255, 255, 255, 1)";将其设为白色
• ctx.fillStyle = null;也许归零它会起作用......

但除了重新绘制之前的值而不是新值之外，我没有得到任何结果。

JsFiddle：https://jsfiddle.net/q9ub0r9z/1/

Answer 1

请改用ctx.fillRect()，查看更新的小提琴：https://jsfiddle.net/q9ub0r9z/2/

Answer 2

您使用.fillRect函数而不是.rect

function showRed(){
    ctx.fillStyle = "rgba(255,0,0,1)";
    ctx.fillRect(0,0, 200, 200);
}
function showGreen(){
    ctx.fillStyle = "rgba(0,255,0,1)";
    ctx.fillRect(200,0, 200, 200);

}
function showBlue(){
    ctx.fillStyle = "rgba(0,0,255,1)";
    ctx.rect(200,200, 200, 200);
}
function showBlack(){
    ctx.fillStyle = "rgba(0,0,0,1)";
    ctx.rect(200,200, 400, 400);
}