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