javascript - 改变画布中两个图形之间旋转速度的问题

Question

let canvas = document.getElementById('canva');
let ctx =canvas.getContext('2d');
let img=new Image();
img.src='photorefaite/terre1.png';
let img2=new Image();
img2.src='photorefaite/mercure1.jpg';

ctx.translate(800,400);

function terre(){
  ctx.globalCompositeOperation = 'destination-over';
  ctx.clearRect(0,0,innerWidth,innerHeight);

  ctx.rotate(1*Math.PI/180);
  ctx.drawImage(img,0,0,50,50);

  ctx.rotate(5*Math.PI/180);
  ctx.drawImage(img2,50,50,40,40);
 

  ctx.rotate(10*Math.PI/180);
  ctx.drawImage(img2,100,100,40,40);
  requestAnimationFrame(terre);
}



terre();

在上面的代码中，我创建了三个具有三种不同转速的图像。然而，这三个数字具有相同的旋转速度，即“ctx.rotate (10 * Math.PI / 180);”，我想知道如何使每个图像都有自己的旋转速度。

标签： javascriptanimation