油画中的旋转图像

Question

我试着创造一些旋转的图像。因此，我创建了一系列的画布，并把每一张图片。但由于某种原因，它们没有被展示出来。请帮帮我。

​

var canvas = [], ctx = [], particles = [];

for (var i = 0; i < 10; i++){
	sym.$( sym.$("Rectangle") ).append('<canvas id="partical' + i + '"></canvas>');
	canvas.push(document.getElementById("partical" + i));

	canvas[i].width = 550;
	canvas[i].height = 400;
	ctx[i] = canvas[i].getContext("2d");
}


for(var i = 0; i < 10; i++){
	particles.push({
		x: Math.random()*canvas[i].width, //x-coordinate
		y: Math.random()*canvas[i].height, //y-coordinate
		img: new Image()
	})

	particles[i].img.src = "images/Flake" + Math.floor(Math.random()*4+1) + ".png";
}

function draw(){
	for(var i = 1; i < 10; i++){
		ctx[i].clearRect(0, 0, canvas[i].width, canvas[i].height);
		var p = particles[i];
		ctx[i].drawImage(p.img,p.x,p.y,50,50); 
		ctx[i].fill();
	}
}

draw();

​

Answer 1

jsFiddle：https://jsfiddle.net/CanvasCode/u0p9wtut/

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);

您可以做的是使用ctx.save、ctx.restore和ctx.translate，您只需先保存画布上下文，然后重新加载它，然后再翻译画布，基本上，转换就像在绘制图像的位置上设置一个偏移，我们将转换位置设置为精灵的中心，然后我们围绕图像旋转(转换意味着我们将图像围绕其中心点旋转)。然后，我们再次更新转换，绘制旋转的图像，然后恢复画布上下文，因为我们可能想要绘制其他内容。如果我们不恢复上下文，那么下一个绘制的图像将考虑到平移和旋转。