html - 绘制带边框的矩形不填充html5

Question

我正在尝试在画布中创建一个网格，如下所示

var canvas = $("#canvas");
var ctx = canvas.get(0).getContext("2d");

ctx.strokeStyle = "rgb(0, 0, 0)";
for(x=0;x<=300;x++){
  for(y=0;y<=300;y++){  
   ctx.strokeRect(x, y, 20, 20);
  }
}

但它只是填充 HTML5 画布而不是绘制带边框的正方形。有人可以告诉我我在这里做错了什么吗？

Answer 1

我这样重写

var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");


context.strokeStyle = "rgb(255, 0, 0)";
for(x=0; x<5; x++){
 for(y=0; y<5; y++){
  context.strokeRect(y*20, x*20, 20, 20);
 }
}