Question

有谁知道为什么这两个矩形没有移动？

var canvas = document.getElementById('canvas'),
    c = canvas.getContext('2d');

function move() {

    var x = 10,
        y = 15;

    c.fillRect(x, y, 5, 5),
    c.fillRect(y, x, 25, 55);
    x++;
    y++;
}

setInterval(move, 300);

Answer 1

每次移动方法再次运行为10和15时，您正在声明x和y。将x和y的声明放在方法之外以使矩形移动。

var canvas = document.getElementById('canvas'),
c = canvas.getContext('2d');


var x = 10;
var y = 15;

function move() {
    c.fillRect(x, y, 5, 5),
    c.fillRect(x, y, 15, 15);
    x++;
    y++;
}

setInterval(move, 300);

Answer 2

这是一个简单的问题。只需在x,y函数之外声明move：

var canvas = document.getElementById('canvas'),
c = canvas.getContext('2d'),
x = 10, y = 15;

请参阅更新的 fiddle

在画布上移动元素

2 个答案: