Javascript 旋转画布中的图像

我正在尝试创建一些旋转图像。因此，我创建了一系列画布，并将其放入每张图片中。但由于某些原因，它们没有显示出来。请帮帮我

var canvas=[]、ctx=[]、particles=[]；
对于（变量i=0；i<10；i++）{
sym.$（sym.$（“矩形”）。附加（“”）；
push（document.getElementById（“partical”+i））；
画布[i]。宽度=550；
帆布[i]，高度=400；
ctx[i]=canvas[i].getContext（“2d”）；
}
对于（变量i=0；i<10；i++）{
粒子。推({
x:Math.random（）*画布[i].宽度，//x坐标
y:Math.random（）*画布[i]。高度，//y坐标
img:newimage（）
})
粒子[i].img.src=“images/Flake”+Math.floor（Math.random（）*4+1）+“.png”；
}
函数绘图（）{
对于（变量i=1；i<10；i++）{
ctx[i].clearRect（0,0，画布[i]。宽度，画布[i]。高度）；
var p=粒子[i]；
ctx[i].drawImage（p.img，p.x，p.y，50,50）；
ctx[i].fill（）；
}
}
draw（）jsFiddle:

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var粒子=函数（xSet，ySet）
{
this.XPos=xSet；
this.YPos=ySet；
this.Sprite=新图像（）；
this.Sprite.src=”http://s.cdn.gaiaonline.com/images/thumbnails/85449184bbb9.png";
这个。旋转=0；
}
var particles=新数组（）；
对于（变量i=0；i<10；i++）{
push（新粒子（Math.random（）*c.width，Math.random（）*c.height））；
}
函数绘图（）
{
ctx.fillStyle=“#000”；
ctx.fillRect（0,0，c.宽度，c.高度）；
对于（var i=0；ic.height）
{
particle.YPos=0；
particle.XPos=Math.random（）*c.width；
}
粒子旋转+=0.01；
}
}
设置间隔（绘制，3）；

您可以使用
ctx.save
、
ctx.restore
和
ctx.translate
，只需先保存画布上下文，以便稍后重新加载，然后翻译画布，基本上翻译就像在绘制图像的位置设置偏移，我们将翻译位置设置为精灵的中心，然后我们旋转图像（平移意味着我们将围绕其中心点旋转图像）。然后，我们再次更新平移，绘制旋转的图像，然后恢复画布上下文，因为我们可能需要绘制其他内容。如果我们不恢复上下文，那么绘制的下一幅图像将考虑平移和旋转。
检查console.log中是否有任何错误。第二，什么是sym？因为这行代码看起来非常可疑。我用edge animate编写了这段代码。使用sym all Ok。如果您需要帮助，请告诉我：）
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var Particle = function(xSet, ySet)
{
    this.XPos = xSet;
    this.YPos = ySet;
    this.Sprite = new Image();
        this.Sprite.src = "http://s.cdn.gaiaonline.com/images/thumbnails/85449184bbb9.png";
    this.Rotation = 0;
}

var particles = new Array();

for(var i = 0; i < 10; i++){
    particles.push(new Particle(Math.random()*c.width, Math.random()*c.height));
}

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

    for(var i = 0; i < particles.length; i++)
    {
      var particle = particles[i];
      particle.YPos += 1;

      // Draw image rotated
      ctx.save();

      ctx.save();
      ctx.translate(particle.XPos + particle.Sprite.width / 2, particle.YPos + particle.Sprite.height / 2);
            ctx.rotate( particle.Rotation );
            ctx.translate(-(particle.XPos + (particle.Sprite.width / 2)), -(particle.YPos));
      ctx.drawImage(particle.Sprite, particle.XPos, particle.YPos);
      ctx.restore();

      ctx.restore();

      if(particle.YPos > c.height)
        {
          particle.YPos = 0;
          particle.XPos = Math.random()*c.width;
        }

      particle.Rotation += 0.01;
    }
}

setInterval(draw, 3);