javascript - 在画布内移动矩形

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/

如您所见，矩形没有移动，而是似乎画了一条线而不是移动了我不希望它画一条线我该怎么做？

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

更改此行：

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

...对此：

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

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

javascript - 在画布内移动矩形

5 回答 5

Related

Reference