clearRect不清除

Question

所以我每隔一秒就制作一个正方形，慢慢地沿着页面移动它。然后我调用clearRect清除画布，以便删除旧的正方形，只剩下新的正方形，但我做错了，画布没有清除。

• 如何让clearRect清除旧方块？

我之前阅读过的问题围绕着使用'draw（）'，但我没有使用它。

HTML

<canvas id="canv1" width="100px" height="100px"></canvas>
<input id="counter" style="width:40px;"></input>

JS

i = 1;
c=1;

window.onload=function(){
  hello();
}

function hello(){
  setInterval(function(){func()},1000);
}

function func(){
  var x = document.getElementById("counter");
  x.value = c;
  var d = document.getElementById("canv1");
  var ctx = d.getContext("2d");
  ctx.rect(20+c,20,40,40);
  ctx.clearRect(0,0,100,100);
  ctx.stroke();
  c++
}

http://jsfiddle.net/ys9Yk/1/

Answer 1

您可以使用strokeRect：

setInterval(func, 1000);

var x = document.getElementById("counter");
var d = document.getElementById("canv1");
var ctx = d.getContext("2d");
var i = 1;
var c = 1;

function func() {
    x.value = c;
    ctx.clearRect(0, 0, 100, 100);
    ctx.strokeRect(20 + c, 20, 40, 40);
    c++;
}

演示： http://jsfiddle.net/ys9Yk/6/