Question

我正在尝试将四个旋转图像添加到动画背景中。

我只能通过下面的代码正确使用一张图片。

如何添加其他三张图片？

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

var img = document.createElement('img');
img.onload = function(){
    render();
}
img.src = 'nano3.png';

function drawImage(img,x,y,r,sx,sy){
    sx=sx||0;
    sy=sy||0;
    r=(r*Math.PI/180)||0;
    var cr = Math.cos(r);
    var sr = Math.sin(r);
    ctx.setTransform(cr,sr,-sr,cr,x-(cr*sx-sr*sy),y-(sr*sx+cr*sy)); 
    ctx.drawImage(img,1,2);
}

var r = 1;
function render(){
    requestAnimationFrame(render);

    ctx.setTransform(1, 0, 0, 1, 0, 0); 
    ctx.clearRect(0,0,800,800);

    drawImage(img,50,50,r++,img.width/2,img.height/2);
}

Answer 1

这应该可以帮到你，我刚刚创建了一个名为unique_ptr的对象，它存储了一个位置，一个图像及其当前的旋转。我们在'setInterval'函数调用中调用'draw'方法，该函数调用旋转画布然后正确绘制精灵。

只是旋转许多图像的注释可能导致画布滞后rotatingimage变量在到达CurrentRotation时永远不会重置为0，因此>359变量将继续越来越高，您可能想要在CurrentRotation函数

中修复它

的jsfiddle：https://jsfiddle.net/xd8brfrk/

的Javascript

RotatingImage.prototype.Draw

Answer 2

您可以使用保存和恢复将不同的变换应用于绘图

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore

如何将四个旋转图像添加到动画背景中？

2 个答案: