The string of the pendulum is drawn as a straight line. Its bottom is changing while using a sine values of an angle so that it gets the oscillating effect.
The pendulum bob is created as a circle, filled with a gradient to give it the appearance of a sphere.
Make sure you stop the animation before choosing the speed to see a smooth effect.
<!--hidden element to store the values for animation--------------->
<input type="hidden" id="h" value="0" />
<canvas id="Canvas_One" width="400" height="300" style="border:2px solid red;" class="imgforcontent">
</canvas>
<!----radio buttons for speed control---------------------------->
<form name="pendulum" action="">
<input id="R1" name="speed" value="Slow" type="radio" />Slow<br /><br />
<input id="R2" name="speed" value="Medium" type="radio" />Medium<br /><br />
<input id="R3" name="speed" value="Fast" type="radio" />Fast<br /><br />
</form>
<!---------------buttons to start and stop the animation------------------------>
<div style="width:400px;">
<input type="button" style="float:left;margin-left:10px;" value="Run" onclick="anim()" id="Animation" />
<input type="button" style="float:right;margin-right:10px;" value="Stop" onclick="window.clearInterval(x)" id="Stopping" >
</div>
<script type="text/javascript">
var canvas = document.getElementById('Canvas_One');
var context = canvas.getContext('2d');
var i;
var x;
var sp;
//code for static string - grey colour
context.beginPath();
context.moveTo(200, 0);
context.lineTo(200, 135);
context.lineWidth = 5;
context.strokeStyle = "grey";
context.stroke();
// code for the static ball - gradient blue
context.beginPath();
context.arc(200, 150, 20, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(200, 150, 2, 200, 150, 18);
// light blue
grd.addColorStop(0, '#8ED6FF');
// dark blue
grd.addColorStop(1, '#0000ff');
context.fillStyle = grd;
context.fill();
// function for the animation
function circ() {
context.clearRect(0, 0, canvas.width, canvas.height);
i = eval(document.getElementById('h').value) + 10;
context.beginPath();
context.moveTo(200, 0);
context.lineTo(200 + 40 * Math.sin(i * Math.PI / 180), 135);
context.lineWidth = 5;
context.strokeStyle = "grey";
context.stroke();
context.beginPath();
context.arc(200 + 40 * Math.sin(i * Math.PI / 180), 150, 20, 0, 2 * Math.PI, false);
if (i == 360 || i > 360) { i = 0; }
//alert(i);
//alert(i);
document.getElementById('h').value = i;
//create radial gradient
var grd = context.createRadialGradient(200 + 40 * Math.sin(i * Math.PI / 180), 150, 2, 200 + 40 * Math.sin(i * Math.PI / 180), 150, 18);
// light blue
grd.addColorStop(0, '#8ED6FF');
// dark blue
grd.addColorStop(1, '#0000ff');
context.fillStyle = grd;
context.fill();
}
// function for timing
function anim() {
if
(document.getElementById('R1').checked)
{ sp = 200; }
else if (document.getElementById('R2').checked) { sp = 100; }
else if (document.getElementById('R3').checked) { sp = 80; }
else
{ sp = 200; }
x = window.setInterval('circ()', sp);
}
</script>