Question

我用Javascript创建了一个画布。我用矩形，圆形等类似的Javascript对象创建了一辆汽车。我的问题是如何让一个对象移动，使其看起来像汽车在骑行。

我已经尝试了一些与在Google上找到的内容有关的东西，但我无法弄清楚。

我仍在学习Javascript的新知识，在此先感谢您的帮助！

var canvasEl = document.createElement('canvas');
canvasEl.setAttribute('width', 1535);
canvasEl.setAttribute('height', 720);
 
var context = canvasEl.getContext('2d');
 
function circle(x, y){
    context.arc(x,y,30,0,2*Math.PI);
}
 
function circleCloud(x, y) {
    context.arc(x,y,30,0,2*Math.PI);
    context.fillStyle = "white";
    context.fill();
}
 
function sunBeam(x, y, s, e) {
    context.moveTo(x,y);
    context.lineTo(s,e);
    context.strokeStyle = 'rgba(252, 212, 64)';
    context.lineWidth = 4;
    context.stroke();
}
 
var body = document.querySelector('body');
 
body.appendChild(canvasEl);
 
 
var x = 0;
context.beginPath();
context.fillStyle = 'rgba(50, 150, 200, .7)';
context.fillRect(x,0,1535,250);
context.closePath();
 
context.beginPath();
context.fillStyle = "green";
context.fillRect(0,250,1535,250);
context.closePath();
 
context.beginPath();
context.fillStyle = "green";
context.fillRect(0,600,1535,130);
context.closePath();
 
 
context.beginPath();
context.fillStyle = "Lightblue";
context.fillRect(900,480,130,50);
context.lineWidth = 3;
context.strokeRect(900,480,130,50);
context.strokeStyle = "black";
context.stroke();
context.closePath();
 
 
context.beginPath();
context.fillStyle = "Blue";
context.fillRect(1030,440,70,90);
context.lineWidth = 3;
context.strokeRect(1030,440,70,90);
context.strokeStyle = "black";
context.stroke();
context.closePath();
 
 
context.beginPath();
context.fillStyle = "White";
context.fillRect(1070,460,30,20);
context.lineWidth = 3;
context.strokeRect(1070,460,30,20);
context.strokeStyle = "black";
context.stroke();
context.closePath();
 
 
context.beginPath();
context.arc(925,540,20,0,2*Math.PI);
context.fillStyle = "Gold";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
context.closePath();
 
 
context.beginPath();
context.arc(1040,540,20,0,2*Math.PI);
context.fillStyle = "Gold";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "Black";
context.stroke();
context.closePath();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
 
<script src="js/main.js"></script>
</body>
</html>

Answer 1

您可以通过以下3个链接来学习JavaScript HTML DOM Animation

Game Controller和Move object with arrow key。您应该尝试学习那些东西。然后就可以做到。

Answer 2

您需要通过在卡车位置上使用变量来开始...
我看到您开始使用的是：var x = 0;，但在卡车上并没有真正使用

然后，我们使用setInterval进行移动，在循环内我们做了几件事： -增加x位置 -清除整个画布 -绘制一个或多个对象

var canvasEl = document.createElement('canvas');
canvasEl.setAttribute('width', 800);
canvasEl.setAttribute('height', 160);
var context = canvasEl.getContext('2d');
var body = document.querySelector('body');
body.appendChild(canvasEl);

var x = 0;
var y = 60;

drawTruck();
setInterval(function() {
  x++;
  context.clearRect(0, 0, 800, 160);
  drawTruck();
}, 80);

function drawTruck() {
  context.beginPath();
  context.fillStyle = "Lightblue";
  context.fillRect(x, y, 130, 50);
  context.lineWidth = 3;
  context.strokeRect(x, y, 130, 50);
  context.strokeStyle = "black";
  context.stroke();
  context.closePath();

  context.beginPath();
  context.fillStyle = "Blue";
  context.fillRect(x + 130, y - 40, 70, 90);
  context.lineWidth = 3;
  context.strokeRect(x + 130, y - 40, 70, 90);
  context.stroke();
  context.closePath();

  context.beginPath();
  context.fillStyle = "White";
  context.fillRect(x + 170, y - 20, 30, 20);
  context.lineWidth = 3;
  context.strokeRect(x + 170, y - 20, 30, 20);
  context.stroke();
  context.closePath();

  context.beginPath();
  context.arc(x + 25, y + 60, 20, 0, 2 * Math.PI);
  context.fillStyle = "Gold";
  context.fill();
  context.lineWidth = 5;
  context.stroke();
  context.closePath();

  context.beginPath();
  context.arc(x + 140, y + 60, 20, 0, 2 * Math.PI);
  context.fill();
  context.stroke();
  context.closePath();

  context.beginPath();
  context.arc(x + 140 + Math.cos(x) * 8, y + 60 + Math.sin(x) * 8, 6, 0, 2 * Math.PI);
  context.stroke();
  context.closePath();
}

我在前轮上添加了一个小动画来模拟卡车向前行驶时的旋转，只是一些基本数学运算就可以使车轮在轮内旋转

如何使用Javascript移动对象？

2 个答案: