Question

我想在加载图片时只旋转一次画布。

我写了这段代码，但它没有旋转。我认为原因是setTimeout（）。

请告诉我。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <canvas width=500 height=500 id="logo"></canvas>
    <script>

    var canvas = document.getElementById('logo');
    var ctx = canvas.getContext('2d');
    var img = new Image();

    img.onload = function () {
        for(var i=1; i<=6; i++){
            setTimeout(function () {
                ctx.save();
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.translate(canvas.width/2, canvas.height/2);
                ctx.rotate(60*i); 
                ctx.drawImage(img, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height); //draw the image ;)
                ctx.restore(); //restore the state of canvas
            }, 40);
        }
    };

    img.src = 'logo.png'; //img
    </script>
</body>
</html>

如何只旋转一次画布

0 个答案: