旋转图像,使其看起来像在旋转



我正在尝试连续旋转雪花的图像,这样它会给人一种雪花在图像中心旋转的错觉,我很难解决这个问题。这里有一些代码。

我有一个循环,调用函数雪球,但这并不重要,因为它不会连续旋转一次。Snow,是我在代码早期引入的图像。

 function drawSnowBall() {
        context.beginPath();
        for (var i = 0; i < mp; i++) {
            var p = particles[i];
            context.drawImage(Snow,p.x, p.y);
        }
        if (pause == false)
        {
        updateSnow();
}
    }
    var angle = 0;
    function updateSnow() {
        angle;
        for (var i = 0; i < mp; i++) {
            var p = particles[i];
            //Updating X and Y coordinates
            //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
            //Every particle has its own density which can be used to make the downward movement different for each flake
            //Lets make it more random by adding in the radius
            p.y += Math.cos(angle + p.d) + SnowSpeed + p.r / 2;
            p.x += Math.sin(angle) * 2;
            //Sending flakes back from the top when it exits
            if (p.x > 800 + 5 || p.x < -5 || p.y > 700) {
                if (i % 3 > 0) //66.67% of the flakes
                {
                    particles[i] = {
                        x: Math.random() * 800,
                        y: -10,
                        r: p.r,
                        d: p.d
                    };
                }
            }

        }
    }

只要使用setInterval并在里面使用方法,就可以了。

最新更新