-1

私は新しいです。画像を移動しようとしましたが、移動しません。どこに問題があるのか​​ わかりません。いくつかのトピックをチェックしましたが、うまくいきませんでした。私のコードは次のとおりです。

var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var bgImage = new Image();
  var player = new Image();
  var x = 50;
      var y = 50;
// We draw the background
  bgImage.onload = function() {
    context.drawImage(bgImage, 0, 0);
  };
  bgImage.src ='images/bg.png';
// We draw the player
player.onload = function(){
context.drawImage(player, x, y);
};
player.src = "images/player.png";
addEventListener("keypress", move,true);
function move(e){
if (e.keyCode == 39){
x += 2;
}
if (e.keyCode == 37){
x -= 4;
}
if (e.keyCode == 38){
y -= 4;
}
if (e.keyCode == 40){
y += 4;
}
}
4

1 に答える 1

0

ここでの概念が欠けています。キャンバス自体は動的ではなく、静的な画像フレームを描画する機能のみを提供します。したがって、アニメーションとインタラクションは可能ですが、すべて自分でコーディングする必要があります。

アニメーション効果は、連続した一連の静的フレームを相互に描画することで実現されます。各フレームは、シーン内の 1 つまたはさまざまなオブジェクトの位置/形状/色のわずかな変化をグラフィカルに表します。

シーン内のオブジェクトのプロパティに加えられた変更が、現在画面に表示されている画像フレームに反映されるループ チェーンを設定する必要があることが明らかになりました。

xしたがって、変数と変数の値を変更するだけでは十分でyはありません。これらはコード内で最初のフレームを描画するために 1 回しか使用されておらず、どこにも使用されていないからです。最初のフレーム以降は何も描画されていません。作成した 1 つの静止画像は画面に永久に残ります。単一の静止画像からアニメーションを期待することはできません。

修正に関しては、複数の画像リソースが必要なため、最初に画像リソースの読み込みスキームを設定する必要があります。それらのロードは非同期であり、順不同であるため (作成された順序に従ってロードされません)。

すべてがロードされた後、連続ループを起動するかを選択できます。これは、画面上の何かに実際に変更が加えられたかどうかに関係なく、別のフレームを描画します (これはアニメーションを作成する標準的な方法であり、より複雑なアプリケーションでは、アニメーション時間の制御を維持できます)

または、コードが単純なので、オブジェクトの位置が変更された場合にのみ、別のフレームを描画することを選択できます。このようなもの

addEventListener("keypress", move,true);
function move(e)
{
    //... key handling stuff

    redraw(); // Drawing the next, modified, frame
}

function redraw()
{
    context.clearRect(0, 0, canvas.width, canvas.height)
    context.drawImage(bgImage, 0, 0);
    context.drawImage(player, x, y);
}
于 2013-11-09T15:05:43.650 に答える