-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

您在这里缺少事物的概念，画布本身并不是动态的，它仅为您提供了绘制静态图像帧的能力。因此，动画和交互是可以的，但必须完全由您自己编码。

任何动画效果都是通过将一系列连续的静态帧相互叠加来给出的。每一帧将在图形上表示场景中一个或多个对象的位置/形式/颜色的轻微变化。

很明显，您必须设置一个循环链，其中对场景中对象属性所做的任何更改都会反映在当前屏幕上的图像帧中。

x所以仅仅改变你的和变量的值是不够的y，因为它们在你的代码中只使用过一次，用来绘制第一帧，然后，它们就没有用处了。在第一帧之后没有任何东西被绘制。您创建的一个静态图像将永远保留在屏幕上，您不能指望从单个静态图像中产生动画。

修复方面，首先需要为您的图像资源设置加载方案，因为您需要多个。因为它们的加载是异步的并且是无序的（它们不会按照创建的顺序加载）。

加载完所有内容后，您可以选择触发一个连续循环，无论屏幕上的任何内容是否实际进行了任何更改，都将绘制另一帧（这是制作动画的标准方式，在更复杂的应用程序中，它将允许您控制动画时间）

或者，由于您的代码足够简单，您可以选择在且仅当对象的位置已更改时再绘制一帧。像这样的东西

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 回答