get a canvas element to rotate properly - Javascript Canvas

Javascript examples for Canvas:Example

  1. HOME
  2. Javascript
  3. Canvas
  4. Example

Description

get a canvas element to rotate properly

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from   w w  w . ja v  a  2s.  co m
(function() {
    setInterval(draw, 30);
    var degrees = 0.0;
    var offset = 8;
    function draw() {
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, 16, 16);
            degrees += 0.10;
            ctx.save();
            ctx.translate(offset, offset);
            ctx.rotate(degrees);
            // Draw half open circle
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.arc(8-offset , 8-offset, 6, 0, 1.75 * Math.PI);
            ctx.stroke();
            // Draw arrowhead
            ctx.lineWidth = 2;
            ctx.moveTo(13-offset , 1-offset);
            ctx.lineTo(9-offset , 5-offset);
            ctx.lineTo(13-offset , 5-offset);
            ctx.lineTo(13-offset , 1-offset);
            ctx.stroke();
            ctx.restore();
        }
    }
})();
    });

      </script> 
   </head> 
   <body> 
      <canvas id="tutorial" width="16" height="16">  
      </canvas>
   </body>
</html>

Related Tutorials