结算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); 
}