無法做背景顏色的對HTML5的畫布rectange

Question

我爲了使邊框和背景綠色矩形的顏色加入這一行，但沒有成功：

context.fillStyle = 'green'; 
context.fill(); 
context.strokeStyle = 'green'; 
context.stroke(); 

這裏我的代碼中的jsfiddle： https://jsfiddle.net/f5z8qtcp/1/

如何在背景中使綠色的矩形變得顏色...創建它時的灰色矩形必須像它一樣，我只想爲結果着色（邊框已經着色爲綠色）。

謝謝。

Answer 1

使用fillRect功能：

function drawAll(){ 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.lineWidth=1; 
    ctx.strokeStyle='green'; 
    ctx.fillStyle = 'green'; 
    for(var i=0;i<rects.length;i++){ 
    var r=rects[i]; 
    ctx.strokeRect(r.left,r.top,r.right-r.left,r.bottom-r.top); 
    ctx.fillRect(r.left,r.top,r.right-r.left,r.bottom-r.top); 
    } 
}