如何使用Javascript移动对象？

t3irkdon 于 2022-12-28 发布在 Java

关注(0)|答案(2)|浏览(156)

我用Javascript创建了一个画布。我用Javascript对象创建了一辆汽车，对象有矩形，圆形等。我的问题是我如何让一个对象移动，使它看起来像汽车在行驶。
我已经尝试了一些东西，我发现在谷歌上，但我不能弄清楚。
我还在学习新的东西在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>

JavaScript

来源：https://stackoverflow.com/questions/57944961/how-can-i-move-an-object-with-javascript

2条答案

按热度按时间

ar7v8xwq1#

你得先用卡车位置的变量...
我看到你开始说：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();
}

我添加了一个小动画到前轮模拟旋转，而卡车向前移动，只是一些基本的数学，使一个圆圈内的车轮旋转

赞(0）回复(0）举报 2022-12-28

tjrkku2a2#

这里有3个链接，您可以按照这些链接来学习JavaScript HTML DOM Animation
Game Controller和Move object with arrow key。你应该试着学习这些东西。然后你就可以做到了。

赞(0）回复(0）举报 2022-12-28