The above animation involves 2-D transformations, specifically
translation and rotation. If you are unfamiliar with the methods involved in 2-D
transformations, it is recommended that you get familiar with them first before
proceeding with this tutorial.
Drawing the wheel:
The first step is to define the parameters of the wheel. Keep
in mind that the above wheel is not one single arc drawn as a circle, but 10 sectors
drawn around the centre to make a circle. So each sector will subtend an angle of
36 degrees.
var centreX = 100;
var centreY = 100;
var radius = 75;
var startAngle = 0 * Math.PI/180;
var endAngle = 36 * Math.PI/180;
We will need an array of colours to fill each sector.
Since 10 sectors make up the wheel, we will draw the sector 10
times using a 'for loop'. Before drawing each sector, we will: 1. Rotate the canvas about the centre of the wheel 2. Assign a colour for the sector from the array 'colours'
function drawWheel()
{
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
for(i = 0; i < 10; i++)
{
ctx.fillStyle = colours[i];
// Draw the sector
ctx.beginPath();
// move to the centre of the wheel
ctx.moveTo(centreX, centreY);
// Draw one side of the sector
ctx.lineTo(centreX+radius, centreY);
// Draw the arc
ctx.arc(centreX,centreY,radius,startAngle,endAngle,false);
// Close the sector on the other side
ctx.closePath();
ctx.fill();
}
}
}
Making the wheel rotate
1. To rotate the wheel, first define the rotate angle.
var rotateAngle = 36 * Math.PI/180;
2. Rotate the canvas about the centre of the wheel
4. A counter keeps track of the number of times the canvas is
rotated. When the number of rotations desired is achieved, stop the animation using
the clearInterval() method.
Draw the 'Rotate' button. Use the addEventListener() method to
detect mouse click. If the mouse is clicked inside the 'Rotate' button, then call
the rotateWheel() function.
function mouseClick(event)
{
// Find out the x and y coordinates where the mouse was clicked
var x = event.clientX;
var y = event.clientY;
// Generate a random number
var rnd = Math.ceil(Math.random() * 100);
// If the mouse was clicked inside the 'rotate' function, then call the 'rotateWheel'
// function every 25 microseconds until the anumationFlag is cleared.
if((x > 200) &&(x < 275) && (y>100) && (y<120))
animationFlag = setInterval(function() {rotateWheel(rnd)},25);
// Capture the event when a mouse is clicked and transfer control to the mouseClick
function
window.addEventListener("click",mouseClick,false);
Let's put it all together now.
HTML Code
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<script type="application/javascript"> var centreX = 100;var centreY = 100;
var radius = 75;
var rotateAngle = 36 * Math.PI/180;
var startAngle = 0 * Math.PI/180;
var endAngle = 36 * Math.PI/180;
var counter = 0;
var animFlag;
var colours = ["teal","red", "green", "blue", "yellow", "violet", "orange", "grey",
"navy blue","purple"];
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
ctx.lineWidth = 3.0;
ctx.fillStyle = "orange";
ctx.fillRect(200, 100, 75, 20);
ctx.fillStyle = "black";
ctx.font = "15px verdana";
ctx.fillText("Rotate", 215, 114);
drawWheel();
}
}
function drawWheel()
{
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
for(i = 0; i < 10; i++)
{
ctx.fillStyle = colours[i];
ctx.translate(centreX,centreY);
ctx.rotate(rotateAngle);
ctx.translate(-centreX,-centreY);
ctx.beginPath();
ctx.moveTo(centreX, centreY);
ctx.lineTo(centreX+radius, centreY);
ctx.arc(centreX,centreY,radius,startAngle,endAngle,false);
ctx.closePath();
ctx.fill();
}
}
}
function rotateWheel(rnd)
{
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
ctx.translate(centreX,centreY);
ctx.rotate(rotateAngle);
ctx.translate(-centreX,-centreY);
drawWheel();
counter++;
if(counter>rnd)
{
counter = 0;
clearInterval(animFlag);
}
}
}
function mouseClick(event)
{
var x = event.clientX;
var y = event.clientY;
var rnd = Math.ceil(Math.random() * 100);
if((x > 200) &&(x < 275) && (y>100) && (y<120))
animFlag = setInterval(function() {rotateWheel(rnd)},25);
}
window.addEventListener("click",mouseClick,false);
