javascript - 在 Canvas 内移动矩形

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

工作版本，以及 demo here 。

我将 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，因为您定义的正方形是(宽度= 10，//播放器的宽度)。因此，如果您靠近 Canvas 端，我想保证它是 Canvas - 播放器的宽度，但因为 x 定义了正方形/播放器图像的左侧像素，所以我添加了 2x 10。在相反的方向上，这不是必需的，所以只要 1x 宽度就足够了。与 y 相同。