Javascript 如何将四个旋转图像添加到动画背景中？

我正在尝试将四个旋转图像添加到动画背景中

我只能用下面的代码使一个图像正常工作

如何添加其他三个图像

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

var img = document.createElement('img');
img.onload = function(){
    render();
}
img.src = 'nano3.png';

function drawImage(img,x,y,r,sx,sy){
    sx=sx||0;
    sy=sy||0;
    r=(r*Math.PI/180)||0;
    var cr = Math.cos(r);
    var sr = Math.sin(r);
    ctx.setTransform(cr,sr,-sr,cr,x-(cr*sx-sr*sy),y-(sr*sx+cr*sy)); 
    ctx.drawImage(img,1,2);
}

var r = 1;
function render(){
    requestAnimationFrame(render);

    ctx.setTransform(1, 0, 0, 1, 0, 0); 
    ctx.clearRect(0,0,800,800);

    drawImage(img,50,50,r++,img.width/2,img.height/2);
}

---

可以使用“保存和恢复”将不同的变换应用于图形

---

这应该对您有所帮助，我刚刚创建了一个名为

rotatingimage

的对象，它存储位置、图像及其当前旋转。我们在“setInterval”函数调用中调用“draw”方法，该函数处理旋转画布，然后正确绘制精灵

只需注意旋转多个图像会导致画布延迟，

CurrentRotation

变量在达到

>359

时永远不会重置为0，因此

CurrentRotation

变量将不断升高，您可能需要在

RotatingImage.prototype.Draw

函数中修复此问题

jsFiddle：

Javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function RotatingImage(x, y, spriteUrl, rotationSpeed) {
  this.XPos = x;
  this.YPos = y;
  this.Sprite = new Image();
  this.Sprite.src = spriteUrl;
  this.RotationSpeed = rotationSpeed;
  this.CurrentRotation = 0;
}

RotatingImage.prototype.Draw = function(ctx) {
    ctx.save();
  this.CurrentRotation += 0.1;
  ctx.translate(this.XPos + this.Sprite.width/2, this.YPos + this.Sprite.height/2);
  ctx.rotate(this.CurrentRotation); 
  ctx.translate(-this.XPos - this.Sprite.width/2, -this.YPos - this.Sprite.height/2);
  ctx.drawImage(this.Sprite, this.XPos, this.YPos);
  ctx.restore();
}

var RotatingImages = [];

RotatingImages.push(new RotatingImage(50, 75, "http://static.tumblr.com/105a5af01fc60eb94ead3c9b342ae8dc/rv2cznl/Yd9oe4j3x/tumblr_static_e9ww0ckmmuoso0g4wo4okosgk.png", 1));

RotatingImages.push(new RotatingImage(270, 25, "http://static.tumblr.com/105a5af01fc60eb94ead3c9b342ae8dc/rv2cznl/Yd9oe4j3x/tumblr_static_e9ww0ckmmuoso0g4wo4okosgk.png", 1));

RotatingImages.push(new RotatingImage(190, 180, "http://static.tumblr.com/105a5af01fc60eb94ead3c9b342ae8dc/rv2cznl/Yd9oe4j3x/tumblr_static_e9ww0ckmmuoso0g4wo4okosgk.png", 1));

RotatingImages.push(new RotatingImage(100, 270, "http://static.tumblr.com/105a5af01fc60eb94ead3c9b342ae8dc/rv2cznl/Yd9oe4j3x/tumblr_static_e9ww0ckmmuoso0g4wo4okosgk.png", 1));

setInterval(function() {
  ctx.fillStyle = "#000"
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < RotatingImage.length; i++) {
    var rotatingImage = RotatingImages[i];
    rotatingImage.Draw(ctx);
  }
}, (1000 / 60));

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
函数旋转图像（x、y、spriteUrl、旋转速度）{
this.XPos=x；
this.YPos=y；
this.Sprite=新图像（）；
this.Sprite.src=spriteUrl；
此参数。旋转速度=旋转速度；
此.CurrentRotation=0；
}
RotatingImage.prototype.Draw=函数（ctx）{
ctx.save（）；
此值为0.1±0.1；
ctx.translate（this.XPos+this.Sprite.width/2，this.YPos+this.Sprite.height/2）；
ctx.rotate（此.CurrentRotation）；
ctx.translate（-this.XPos-this.Sprite.width/2，--this.YPos-this.Sprite.height/2）；
ctx.drawImage（this.Sprite、this.XPos、this.YPos）；
ctx.restore（）；
}
var RotatingImages=[]；
旋转图像。推送（新旋转图像（50,75，）http://static.tumblr.com/105a5af01fc60eb94ead3c9b342ae8dc/rv2cznl/Yd9oe4j3x/tumblr_static_e9ww0ckmmuoso0g4wo4okosgk.png", 1));
旋转图像。推送（新的旋转图像（270，25，）http://static.tumblr.com/105a5af01fc60eb94ead3c9b342ae8dc/rv2cznl/Yd9oe4j3x/tumblr_static_e9ww0ckmmuoso0g4wo4okosgk.png", 1));
旋转图像。推送（新的旋转图像（190180，）http://static.tumblr.com/105a5af01fc60eb94ead3c9b342ae8dc/rv2cznl/Yd9oe4j3x/tumblr_static_e9ww0ckmmuoso0g4wo4okosgk.png", 1));
旋转图像。推送（新旋转图像（100270，）http://static.tumblr.com/105a5af01fc60eb94ead3c9b342ae8dc/rv2cznl/Yd9oe4j3x/tumblr_static_e9ww0ckmmuoso0g4wo4okosgk.png", 1));
setInterval（函数（）{
ctx.fillStyle=“#000”
ctx.fillRect（0，0，canvas.width，canvas.height）；
对于（var i=0；i