javascript - 在 Canvas 中旋转图像

Question

我正在尝试创建一些旋转图像。所以我创建了一系列 Canvas 并放入每张图片。但由于某种原因，它们没有显示。请帮助我。

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，您只需先保存 Canvas 上下文所以我们可以稍后重新加载它，然后我们平移 Canvas ，基本上平移就像在绘制图像的位置设置偏移量，我们将平移位置设置为 Sprite 的中心，然后我们旋转图像(平移意味着我们将围绕其中心点旋转图像)。然后我们再次更新翻译，绘制旋转的图像，然后恢复 Canvas 上下文，因为我们可能想要绘制其他东西。如果我们不恢复上下文，那么绘制的下一张图像将考虑平移和旋转。