無法為html5畫布上的矩形着色背景

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