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，因为你定义的方格是（width = 10，//播放器的宽度）。因此，如果你在画布末端附近，我想保证它是画布 - 播放器的宽度，但是因为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对象，width和height是函数调用，而不是属性。改变这一行

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

Answer 5

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

此外，您还可以看到here的实时项目。

在画布内移动一个矩形

5 个答案: