Javascript 在keydown（JS，Jquery）上修改HTML5画布元素

按左键时，我试图移动画布上的某个对象

$(document).ready(function () {

var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
    ctx.drawImage(img,0,0); // draw the image at the right coords
    ctx.drawImage(img,110,110); // draw the image at the right coords
    ctx.save();
};
img.src = 'tiles/processed/1_grass.png'; // Set source path

function draw() {
    ctx.translate(20,0);
};

draw();
draw();
draw();

$(document).keydown(function(e) {
    if (e.keyCode == 37) {
        draw();
    };

});

});

现在，出现了三个draw（）；'这是可行的，但函数中的函数不可行

我是否完全忽略了画布的概念（因为它本质上是静态的，并且必须一直完全重新绘制），还是我做错了什么

（注：我也在使用Jquery）

干杯

您从未真正重新绘制画布。您绘制一次（

img.onload

），否则仅翻译画布

draw

函数应清除画布并重新绘制图像

---

下面是一个基于代码的简单示例：

$(function () {
  var ctx = document.getElementById('canvas').getContext('2d');

  function draw() {
    ctx.save();
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.restore();

    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, 20, 20);
  };

  draw();
  $(document).keydown(function(evt) {
    switch(evt.keyCode) {
      case 37:
        ctx.translate(-5, 0);
        break;
      case 38:
        ctx.translate(0, -5);
        break;
      case 39:
        ctx.translate(5, 0);
        break;
      case 40:
        ctx.translate(0, 5);
        break;
    }

    draw();
  });
});​

演示：

---

---

不过，就我个人而言，我不会使用

translate

来处理这个动作。我会使用一些x/y坐标，存储在一个私有变量中。按下键后，我将操纵这些坐标并重新绘制。

罗杰。愚蠢的问题。有趣的是，你最初的回答（在编辑之前）已经让我兴奋起来，帮助我找到了解决方案。我完全理解你。也谢谢你的代码。我将写我自己的解决方案，因为我学到了最好的构建基础（相对于复制粘贴），但它帮助我确定了解决方案。非常非常感谢！