clearRect不清除

debugcn 发表于 Dev

基因组314

因此，我每秒创建一个正方形，使其缓慢地沿页面移动。然后，我调用clearRect清除画布，以便删除旧的正方形，仅保留新的正方形，但是我做错了什么，并且未清除画布。

如何获得clearRect清除旧方块？

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

的HTML

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

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/

氏族

您可以使用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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。