Question

我在画布上绘制了一个矩形，我只想让它每隔半秒钟移动一次。我试图每0.5秒增加一次y坐标 - 但没有任何事情发生。

有谁能告诉我哪里出错了？

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas); 

setInterval(function(){
var x = 100;
var y= 300;
var block = ctx.fillRect(x, y, 100, 120);
y++;


},500);

Answer 1

您正在重置每次通话的x和y，因此它们永远不会增加。此外，您需要清除以前绘制的矩形，否则它们会变得模糊不清。

为了能够在以后取消循环，您可以考虑存储从setInterval返回的计时器ID，这样您就可以在需要时调用clearInterval(id)（即在某种情况下）。

var x = 100;
var y = 300;
var tid;

tid = setInterval(function(){
    ctx.clearRect(x - 2, y - 2, 104, 124); /// compensate for anti-aliasing
    ctx.fillRect(x, y, 100, 120);
    y++;
},500);

条件可能是：

if (y > canvas.height) clearInterval(tid);

Answer 2

移动

var x = 100;
var y = 300;

超出setInterval中的功能，因此不会每帧都重置。

Answer 3

执行函数时，您始终将x和y设置为默认值。你应该外包它们。

var canvas = document.createElement("canvas");
var c = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);


var x = 100;
var y = 300;
setInterval(function(){    
    c.beginPath();
    c.arc(x, y, 100, 120, Math.PI * 2, false);
    c.fill();
    x += 10;


},500);

请参阅this小提琴。

在HTML画布上移动元素

3 个答案: