Javascript 绘制圆并保留第一个上载的精灵

首先，我把一辆车上传到画布上，并赋予它转向和运动属性。我试着画一个圆圈，以便与汽车并排，但它不能正常工作。由于某种原因，圆圈是孤独的，闪烁着。我完全取消了暂停，圆圈和汽车都消失了。调整超时速率并不能消除闪烁。请帮我把它们放在屏幕上并放在一起好吗？

---

我没有你的汽车图像，但似乎你的设置间隔设置为30ms，你每10ms调用一次超时（相当于设置间隔），每次清除画布时，都会产生闪烁。您应该只有一个重绘功能，可以清除画布，绘制汽车，然后绘制圆圈

试一试

//设置画布和上下文
var canvas=document.getElementById（'gameCanvas'）；
var context=canvas.getContext（'2d'）；
//上传车
var car=新图像（）；
car.src=”file:///H:/Desktop/Game/img/car.png";
//汽车的设置特性
var x=450；
变量y=730；
无功转速=10；
var角=990；
var mod=0；
//键的事件侦听器
addEventListener（“keydown”，keypress\u处理程序，false）；
addEventListener（“keyup”，keyup\u处理程序，false）；
//绘制汽车转弯和变速图
函数绘图（）{
x+=（速度*模）*数学cos（数学PI/180*角）；
y+=（速度*模）*数学正弦（数学π/180*角）；
context.save（）；
语境。翻译（x，y）；
旋转（Math.PI/180*角度）；
上下文.drawImage（car，-（car.width/2），-（car.height/2））；
restore（）；
}
//设置关键点
函数keyup\u处理程序（事件）{
console.log（'a'）；
if（event.keyCode==38 | | event.keyCode==40）{
mod=0；
}
}
//设置所有键
函数keypress_处理程序（事件）{
console.log（event.keyCode）；
如果（event.keyCode==38）{
mod=1；
}
如果（event.keyCode==40）{
mod=-1；
}
如果（event.keyCode==37）{
角度-=5；
}
如果（event.keyCode==39）{
角度+=5；
}
}
var context=$（'#gameCanvas'）[0].getContext（'2d'）；
变量宽度=$（“#游戏画布”）.width（）；
变量高度=$（“#游戏画布”）.height（）；
var circleX=宽度/2；
var circleY=高度/2；
var circleVX=1.0；
var circleVY=0.0；
var-circleR=30；
函数更新（）{
clearRect（0，0，宽度，高度）；
/*
circleX=Math.random（）*（宽度-2*圈）+圈；
circleY=Math.random（）*（高度-2*圈）+圈；
*/
draw（）；
画圈（圈、圈、圈）；
设置超时（更新，10）；
}
功能画布单击（事件）{
var clickX=event.pageX；
var clickY=event.pageY；
var edgeX=clickX-circleX；
var edgeY=clickY-circleY；
var r=数学sqrt（edgeX*edgeX+edgeY*edgeY）；
if（r

此外，请查看而不是使用超时

//Setting the canvas and context
var canvas = document.getElementById('gameCanvas');
var context = canvas.getContext('2d');
//Uploading car
var car = new Image();
car.src = "file:///H:/Desktop/Game/img/car.png";

//Setting properties of car
var x = 450;
var y = 730;
var speed = 10;
var angle = 990;
var mod = 0;

//Event listeners for keys
window.addEventListener("keydown", keypress_handler, false);
window.addEventListener("keyup", keyup_handler, false);

//Drawing the car turning and changing speed
function draw() {

    x += (speed * mod) * Math.cos(Math.PI / 180 * angle);
    y += (speed * mod) * Math.sin(Math.PI / 180 * angle);

    context.save();
    context.translate(x, y);
    context.rotate(Math.PI / 180 * angle);
    context.drawImage(car, -(car.width / 2), -(car.height / 2));
    context.restore();
}

//Setting the keys
function keyup_handler(event) {
    console.log('a');
    if (event.keyCode == 38 || event.keyCode == 40) {

        mod = 0;
    }
}

//Setting all of the keys
function keypress_handler(event) {
    console.log(event.keyCode);
    if (event.keyCode == 38) {
        mod = 1;
    }
    if (event.keyCode == 40) {
        mod = -1;
    }
    if (event.keyCode == 37) {
        angle -= 5;
    }
    if (event.keyCode == 39) {
        angle += 5;
    }
}


var context = $('#gameCanvas')[0].getContext('2d');
var width = $('#gameCanvas').width();
var height = $('#gameCanvas').height();

var circleX = width / 2;
var circleY = height / 2;
var circleVX = 1.0;
var circleVY = 0.0;
var circleR = 30;

function update() {
  context.clearRect(0, 0, width, height);


/*
  circleX = Math.random() * (width - 2 * circleR) + circleR;
  circleY = Math.random() * (height - 2 * circleR) + circleR;
*/
  draw();
  drawCircle(circleX, circleY, circleR);

  setTimeout(update, 10);
}

function canvasClick(event) {
  var clickX = event.pageX;
  var clickY = event.pageY;
  var edgeX = clickX - circleX;
  var edgeY = clickY - circleY;
  var r = Math.sqrt(edgeX * edgeX + edgeY * edgeY);
  if (r < circleR) {
    context.clearRect(0, 0, width, height);
  }
}

function drawCircle(x, y, r) {
  context.beginPath();
  context.arc(x, y, r, 0, 2 * Math.PI, false);

  context.fillStyle = 'red';
  context.fill();

  context.lineWidth = 3;
  context.strokeStyle = 'black';
  context.stroke();
}

$('#gameCanvas').click(canvasClick);
update();