www.webdeveloper.com
Results 1 to 3 of 3

Thread: HTML5 Canvas Rotation

  1. #1
    Join Date
    Apr 2010
    Posts
    121

    Red face HTML5 Canvas Rotation

    Hi! I just can't seem to get this to work! You would not believe how much time I've spent with this. I want to rotate a shape on an HTML5 canvas. Preferably, a small amount (one degree) at a time. I don't seem to be getting it, though!

    In the future, the arrow (that is on the HTML5 canvas) will move around the page, pointing to different items and explaining what they do. Like an interactive tutorial. The arrow, however, needs to be able to rotate before I add the rest of the code in (which is already written).

    My only picky requests is No Jquery. There's a way to do this in HTML5.

    It's slightly stripped down.

    Here's the source:

    functions.js
    Code:
    function drawArrow(a) {
    	var canvas=document.getElementById("arrow");
      var c=canvas.getContext("2d");
    	   c.strokeStyle="#002DAF"; //  line color
    	   c.lineWidth=2; // line width
    	   c.fillStyle="#E1E9FF"; // fill color
     
    	   c.moveTo(39,12); // 1
    	   c.lineTo(1,12); // 4
    	   c.lineTo(1,63); // 4
    	   c.lineTo(39,63); // 2
    	   c.lineTo(74,38); // 3
    
    	   //c.lineTo(400,100); // 5
     
    	   c.closePath();	   
    	   c.stroke();
    	   c.fill();
    	   c.fillStyle = "black";
         c.font = "20pt Arial";
    	   c.fillText("?", 15, 47);
         if(a == 1) { tryrotate(20,document.getElementById('arrow').getContext('2d')); }
    	}
    	var position = 0;
    function tryrotate(goal,ctx) {
      if(position < goal) {
        var rot = 5;
                    //I'm Not Sure About This
                    ctx.save();
                    ctx.clearRect(0,0,72,72);
                    ctx.translate(36,36); // to get it in the origin
                    rotation +=1;
                    ctx.rotate(90 * Math.PI/180); //rotate in origin
                    ctx.translate(-72,-72); //put it back
                    drawArrow();
                    ctx.restore();
                    //End Unsureness
        //draw after rotate                  
        position = position+rot;
        alert("hi");
        window.setTimeout("tryrotate(" + goal + ",document.getElementById('arrow').getContext('2d'))",250);
      } else {
        return true;
      }
    }
    Main.html
    HTML Code:
    <html>
    <head>
    <title>Javascript Animation Demo: Animation Sequence and Simultaneous Animation</title>
    <style type="text/css">
    .example-box {
     position:absolute;
     left:0px;
     top:0px;
     width:3em;
     background:#99ccff;
     text-align:center;
     font-family:"Helvetica neue",helvetica,tahoma,verdana,arial,sans-serif;
     font-size:1.5em;
     line-height:100%;
     color:#fff;
     cursor:pointer;
    }
    </style>
    <script type="text/javascript" src="functions.js"></script>
    <script type="text/javascript">
    window.onload = function() {
    	drawArrow(1);
    }
    </script>
    </head>
    <body>
    	<div>
    	 <h1>Javascript animation demo</h1>
    	 <h2>View source for details</h2>
    	 <div id="box" class="example-box" onclick="redoAnimationDemo()"><b>#box</b></div>
    	</div>
    	<canvas id="arrow" width="76" height="76"><span style="font-size:50pt;">&#8658</span></canvas>
    </body>
    </html>
    Many, Many thanks to those who are willing to give this a shot!
    ~Charles

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,273
    Have you seen this demo with RaphaŽl ? This work fine like here without HTML 5 !

  3. #3
    Join Date
    Apr 2010
    Posts
    121
    Thankyou, might help me get the grips with it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles