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();
    };

});

});

これで、3 つの draw(); が機能しているように見えますが、関数内の機能は機能していません。

キャンバスの概念を完全に見逃していますか (本質的に静的であり、常に完全に再描画する必要があります)、それとも何か間違っていますか?

(ps .: Jquery も使用しています)

乾杯！

4

1 に答える 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 座標を使用します。キーダウンで、それらの座標を操作して再描画します。

于 2012-09-05T09:08:12.510 に答える