Question

我试图制作一些旋转图像。所以我创建了一个画布阵列并放入每张图片中。但由于某种原因，它们没有显示出来。请帮帮我。

＆＃13;

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

＆＃13;

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，你只需先保存画布上下文，这样我们以后可以重新加载它，然后我们翻译画布，基本上是translate就像在绘制图像的位置设置偏移一样，我们将平移位置设置为精灵的中心，然后我们旋转图像（平移意味着我们将围绕其中心点旋转图像）。然后，我们再次更新翻译，绘制旋转的图像，然后恢复画布上下文，因为我们可能想要绘制其他内容。如果我们不恢复上下文，则下一个绘制的图像会考虑平移和旋转。

在画布中旋转图像

1 个答案: