时间戳

首页 > 解决方案 > 如何正确移动具有超过 2 个值的画布对象

javascript - 如何正确移动具有超过 2 个值的画布对象

问题描述

我正在尝试创建画布 HTML 5 来移动对象并在它到达结束时停止。为此，我为 X 设置了 10 个值，为 Y 设置了 10 个值。首先，我需要将所有值作为 X 和 Y 的坐标。单击按钮时，动画应该在到达结束时开始和停止。

注意：我必须为每个 X 和 Y 计算 10 个值，当到达 X 和 Y 的最后一个值时，鱼移动必须停止。这是我必须遵循的要求。

我的代码仅适用于前两个 X 和 Y 值。我不知道怎么做剩下的。我试图创建for loop内部GetStarted()函数，但它也不起作用。 

function GetStarted(){

  for(var i=0; i<10; i++){
  // get the canvas's 2d context
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");

  // clear the canvas
  context.clearRect(0, 0, canvas.width, canvas.height);

  // get the position
  var abc = Number(document.getElementById("x").value);
  var xyz = Number(document.getElementById("y").value); 

  // creating an image from scratch
  var image = new Image();
  image.src = "https://www.uow.edu.au/~dong/w3/assignment/a8/fish.png";

  // when the image are loaded,   
  // draw the image at the specified position
  image.onload = function() {
    context.drawImage(image, abc, xyz); 
  };
}
}
#x,#y {
width : 60px;
}
<table>
<tr>
<td> X </td> 
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
</tr>

<tr>
<td> Y </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td> 
</tr>
</table>
<button onClick="GetStarted()">
Swim little fish</button>
<br /><br />
<canvas id="canvas" width="1200" height="300"
style="border:1px solid black;">
Your browser does not support canvas.
<img src="https://www.uow.edu.au/~dong/w3/assignment/a8/fish.png" id="fishes">

</canvas>
</body>
</html>

标签： javascripthtmlcanvashtml5-canvas

解决方案

这是移动鱼的起点：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x = y = 0

// creating an image from scratch
var image = new Image();
image.onload = function() {
  context.drawImage(image, x, y);
};
image.src = "https://www.uow.edu.au/~dong/w3/assignment/a8/fish.png";

function GetStarted() {
  setInterval(Move, 20)
}

function Move() {
  x = (x + 9) % canvas.width;
  y = (y + 1) % canvas.height; 
  
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(image, x, y);
}
<button onClick="GetStarted()">Swim little fish</button> <br /><br />

<canvas id="canvas" width="600" height="170" style="border:1px solid black;"></canvas>

如您所见，我已经显着更改了您的代码！

现在鱼移动了，但是没有地方可以输入 X 和 Y 就像你拥有的那样不会做出非常平滑的运动，而是更像是在跳来跳去，你也不能给 html 相同的 id元素并期望您可以使用document.getElementById("y")无法正常工作的元素来获得所需的元素

推荐阅读