在画布内移动一个矩形

Question

我的代码：

 $(document).ready(function () {

    var canvas,
    ctx,
    playerimage,
    x,
    y,
    speed = 5, //speed for the player to move at
    width = 10, //width of the player
    height = 10; //height of the player

    function init() {
        canvas = $("#Mycanvas");
        ctx = canvas[0].getContext('2d');
        x = canvas.width() / 2;
        y = canvas.height() / 2;

         playerimage = new Image();
         playerimage.src = "ninja.png"; //path to the image to use for the player
         window.addEventListener("keydown", update, false);
        //canvas.addEventListener("keypress", update);
         render();
    }

    $(window).load(function () { init(); });

    function update(event) {
        if (event.keyCode == 38) {
            y -= speed; //going up
        }
        if (event.keyCode == 40) {
            y += speed; //going down
        }
        if (event.keyCode == 37) {
            x -= speed; //going left
        }
        if (event.keyCode == 39) {
            x += speed; //going right
        }
        render();
    }

    function render() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillRect(x, y, width, height);


    }
});

我的 jsfiddle： http : //jsfiddle.net/BLpGH/14/

正如您所看到的，矩形没有移动，而是看起来像是在画一条线而不是在移动，我不希望它画一条线，我该怎么做？

Answer 1

下的工作版本，并在此处进行演示。

我将clearRect移至更新函数，以便它在值更改之前运行。 我还添加了if条件，因此img不会离开canvas 。

   function update(event) {
       if (x + 20 > canvas.width() && event.keyCode == 39) {
           ctx.clearRect(x, y, width, height);
           x = canvas.width() - 15;
           render();
           return false;
       }
       if (x - 10 < 0 && event.keyCode == 37) {
           ctx.clearRect(x, y, width, height);
           x = 5;
           render();
           return false;
       }

       if (y - 10 < 0 && event.keyCode == 38) {
           ctx.clearRect(x, y, width, height);
           y = 5;
           render();
           return false;
       }
       if (y + 20 > canvas.height() && event.keyCode == 40) {
           ctx.clearRect(x, y, width, height);
           y = canvas.height() - 15;
           render();
           return false;
       }

       ctx.clearRect(x, y, width, height);
       if (event.keyCode == 38) {
           y -= speed; //going up
       }
       if (event.keyCode == 40) {
           y += speed; //going down
       }
       if (event.keyCode == 37) {
           x -= speed; //going left
       }
       if (event.keyCode == 39) {
           x += speed; //going right
       }
       render();
   }

   function render() {
       ctx.fillRect(x, y, width, height);
   }

我使用 x + 20 因为你定义的正方形是 (width = 10, //width of the player)。 因此，如果您靠近画布末端，我想保证它是画布 - 播放器的宽度，但是因为 x 定义了正方形/播放器图像的左侧像素，所以我添加了 2x 10。在相反的方向上，这不是必需的，所以只有 1 倍的宽度就足够了。 与 y 相同。

Answer 2

canvas.width和canvas.height是函数。 将它们存储为变量或调用canvas.width()和canvas.height()

Answer 3

改变这一行：

ctx.clearRect(0, 0, canvas.width, canvas.height);

...到这个：

ctx.clearRect(0, 0, canvas.width(), canvas.height());

演示： http : //jsfiddle.net/BLpGH/15/

也就是说，调用.width和.height作为函数。 尽管将这些值存储在变量中比每次重绘时都调用这两个方法更有效。

Answer 4

您没有正确清除画布。 canvas 变量是一个 jQuery 对象，宽度和高度是函数调用，而不是属性。 改变这一行

ctx.clearRect(0, 0, canvas.width(), canvas.height());

Answer 5

这是一个项目，用于在画布内移动矩形，您可以在画布内添加、删除任意数量的正方形，您可以在此处访问公共存储库。

此外，您可以在这里看到现场项目。