Question

我是新人。我试图移动图像，但它没有，我不知道问题出在哪里。我检查了一些主题，但它没有用。这里是我的代码：

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

Answer 1

你错过了这里的概念，画布本身并不是动态的，它只为你提供了绘制静态图像帧的能力。因此，动画和交互是可能的，但它必须由你自己完全编码。

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

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

因此，仅更改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);
}

图像不会在画布上移动

1 个答案: