Question

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Cog</title>
    <script type="text/javascript">
        var cog = new Image();
        function init() {
            cog.src = 'needle.png'; // Set source path
            setInterval(draw,100);
        }
        var rotation = 0;
        function draw(){
            var ctx = document.getElementById('myCanvas').getContext('2d');
            ctx.globalCompositeOperation = 'destination-over';
            ctx.save();
            ctx.clearRect(0,0,500,500);
            ctx.translate(200,180); // to get it in the origin
            rotation +=1;
            ctx.rotate(rotation*Math.PI/180); //rotate in origin
            ctx.translate(0,-90); //put it back
            ctx.drawImage(cog,(-13.5),(-13.5),48,111);
            ctx.restore();
        }
        init();
    </script>
</head>
<body>
    <canvas width="500" height="500" id="myCanvas"></canvas>
</body>
</html>

Answer 1

using HTML5 Canvas - rotate image about arbitrary point

如何使针图像从180度旋转到0度，360度的一半

1 个答案: