Pendulum
MouseOver on canvas above
Code
<canvas id="canvas" width="200" height="200" style="background-color: #f9f9f9;cursor:pointer;"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var y=40, //start Angle
t=true, // Used to toggle the angle direction
animation;
function draw() {
ctx.clearRect(0,0, canvas.width, canvas.height);
y%=146;
if(t)y+=2;
else y-=2;
if(y>140 || y<40)t=!t; //to toggle the angle direction after 140deg
ctx.save();
ctx.translate(100,100);
ctx.rotate(y*Math.PI/180);
ctx.translate(-100,-100);
ctx.strokeStyle="red";
ctx.beginPath();
ctx.arc(100, 100, 10, 0, Math.PI * 2, true);
ctx.fillStyle="yellow";
ctx.fill();
ctx.moveTo(100,100);
ctx.lineTo(180,100)
ctx.stroke();
ctx.strokeRect(165,85,30,30);
ctx.restore();
ctx.strokeText(y+"deg",10,10); // To show the rotation
animation = requestAnimationFrame(draw);
}
canvas.addEventListener('mouseover', function() {
animation = requestAnimationFrame(draw);
});
canvas.addEventListener('mouseout', function() {
cancelAnimationFrame(animation);
});
</script>