Question

我想在Canvas上绘制矩形然后做同样的事情但是用更大的。我的代码是：

var ctx = document.getElementById('canvas').getContext('2d');
for(var i=0;i<10000;i++){
  ctx.beginPath();
  var x = Math.random() * 1000;               
  var y = Math.random() * 1000;               
ctx.fillStyle = "rgb("+
Math.floor(Math.random()*256)+","+
Math.floor(Math.random()*256)+","+
Math.floor(Math.random()*256)+")";
ctx.fillRect(x,y,10,10);
}

之后我使用的功能会告诉我完成drwoing需要多长时间。接下来是：

for(var i=0;i<10000;i++){
  ctx.beginPath();
  var x              = Math.random() * 1000;               // x coordinate
  var y              = Math.random() * 1000;               // y coordinate
//wypelnianie
ctx.fillStyle = "rgb("+
Math.floor(Math.random()*256)+","+
Math.floor(Math.random()*256)+","+
Math.floor(Math.random()*256)+")";
//rysowanie
ctx.fillRect(x,y,200,200);
ctx.closePath();
}

那样做但矩形更大。数学工作正常，因为时间很好（我测试了它们）但是在第一次投掷时它会从第二个代码中绘制矩形然后再次执行。它应绘制第一个小矩形，然后绘制两个矩形。

我做错了什么？也许它不能在同一个画布上完成？

如何在Canvas上重绘对象？

0 个答案: