我正在尝试创建一些旋转图像。所以我创建了一系列 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();
最佳答案
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 上下文,因为我们可能想要绘制其他东西。如果我们不恢复上下文,那么绘制的下一张图像将考虑平移和旋转。
关于javascript - 在 Canvas 中旋转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34150542/