HTML5 Canvas Rotation

**SMTS** · 09-04-2011 10:04 PM

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

**007Julien** · 09-05-2011 09:07 AM

Have you seen this demo with Raphaël ? This work fine like here without HTML 5 !

**SMTS** · 09-08-2011 12:18 AM

Thankyou, might help me get the grips with it.

Thread: HTML5 Canvas Rotation

Thread Tools

Display

HTML5 Canvas Rotation

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions