javascript - 在 Canvas 上移动元素

Question

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

http://jsfiddle.net/tmyie/R5wx8/

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

每次 move 方法运行时，您都会再次声明 x 和 y 为 10 和 15。将 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);