如何使用Javascript移动对象？

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

我已经尝试了一些我在谷歌上找到的东西，但我想不出来

我还在学习Javascript的新东西，提前感谢您的帮助

var canvasEl=document.createElement（'canvas'）；
canvasEl.setAttribute（'width'，1535）；
canvasEl.setAttribute（'height'，720）；
var context=canvasEl.getContext（'2d'）；
函数圆（x，y）{
弧（x，y，30,0,2*Math.PI）；
}
函数环云（x，y）{
弧（x，y，30,0,2*Math.PI）；
context.fillStyle=“白色”；
context.fill（）；
}
功能阳光（x、y、s、e）{
上下文。移动到（x，y）；
上下文。行到（s，e）；
context.strokeStyle='rgba（252212,64）'；
context.lineWidth=4；
stroke（）；
}
var body=document.querySelector（'body'）；
附肢儿童（canvasEl）；
var x=0；
context.beginPath（）；
context.fillStyle='rgba（50150200，.7）'；
fillRect（x，01535250）；
closePath（）；
context.beginPath（）；
context.fillStyle=“绿色”；
context.fillRect（0251535250）；
closePath（）；
context.beginPath（）；
context.fillStyle=“绿色”；
context.fillRect（06001535130）；
closePath（）；
context.beginPath（）；
context.fillStyle=“Lightblue”；
fillRect（900480130,50）；
context.lineWidth=3；
strokeRect（900480130,50）；
context.strokeStyle=“黑色”；
stroke（）；
closePath（）；
context.beginPath（）；
context.fillStyle=“蓝色”；
fillRect（1030440,70,90）；
context.lineWidth=3；
strokeRect（1030440,70,90）；
context.strokeStyle=“黑色”；
stroke（）；
closePath（）；
context.beginPath（）；
context.fillStyle=“白色”；
fillRect（1070460,30,20）；
context.lineWidth=3；
strokeRect（1070460,30,20）；
context.strokeStyle=“黑色”；
stroke（）；
closePath（）；
context.beginPath（）；
弧（925540,20,0,2*Math.PI）；
context.fillStyle=“Gold”；
context.fill（）；
context.lineWidth=5；
context.strokeStyle=“黑色”；
stroke（）；
closePath（）；
context.beginPath（）；
arc（1040540,20,0,2*Math.PI）；
context.fillStyle=“Gold”；
context.fill（）；
context.lineWidth=5；
context.strokeStyle=“黑色”；
stroke（）；
closePath（）

帆布
以下是3个链接，您可以通过这些链接进行学习

和。你应该努力学习这些东西。然后您就可以这样做。
您需要使用卡车位置上的变量开始…

我看到您是从以下内容开始的：
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'）；
附肢儿童（canvasEl）；
var x=0；
变量y=60；
牵引车（）；
setInterval（函数（）{
x++；
clearRect（0,0800160）；
牵引车（）；
}, 80);
函数drawtrack（）{
context.beginPath（）；
context.fillStyle=“Lightblue”；
fillRect（x，y，130，50）；
context.lineWidth=3；
strokeRect（x，y，130，50）；
context.strokeStyle=“黑色”；
stroke（）；
closePath（）；
context.beginPath（）；
context.fillStyle=“蓝色”；
fillRect（x+130，y-40,70,90）；
context.lineWidth=3；
strokeRect（x+130，y-40，70，90）；
stroke（）；
closePath（）；
context.beginPath（）；
context.fillStyle=“白色”；
fillRect（x+170，y-20,30,20）；
context.lineWidth=3；
（x+170，y-20,30,20）；
stroke（）；
closePath（）；
context.beginPath（）；
弧（x+25，y+60，20，0，2*Math.PI）；
context.fillStyle=“Gold”；
context.fill（）；
context.lineWidth=5；
stroke（）；
closePath（）；
context.beginPath（）；
弧（x+140，y+60，20，0，2*Math.PI）；
context.fill（）；
stroke（）；
closePath（）；
context.beginPath（）；
弧（x+140+Math.cos（x）*8，y+60+Math.sin（x）*8,6,0,2*Math.PI）；
stroke（）；
closePath（）；
}