0

我试图在按下左键时在画布上移动一些东西。

$(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(); 的工作，但函数内部的一个没有。

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

（ps：我也在使用Jquery）

干杯!

4

1 回答 1

1

你从来没有真正重绘画布。您绘制一次 ( 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();
  });
});​

演示：http: //jsfiddle.net/Vx2kQ/

不过，就个人而言，我不会translate用来处理那个动作。我会使用一些 x/y 坐标，存储在私有变量中。在 keydown 上，我会操纵这些坐标并重绘。

于 2012-09-05T09:08:12.510 回答