1. Home
  2. Computer Programming

Computer Programming

Creating 2-D Animations on HTML5 Canvas - proof of Pythagoras theorem

In this tutorial, you will find:

  • A moving right-angle triangle in a circle
  • The vertex of the triangle moving along the circumference of the circle while proving the Pythagorean Theorem / Pythagoras Theorem.

Finding a good book to master HTML5 can be very challenging: there are so many around - most with eye-catching titles and very complex substance.
Therefore, Vivax Solutions strongly recommends Core HTML5 Canvas for those who really want to delve into HTML5.
Please click the image to access Amazon:

Pythagorean Theorem / Pythagoras Theorem in a Circle

The vertex of the right-angled triangle moves along the circumference of the circle in such a way that its hypotenuse remains a diameter of the circle throughout.

You can see the verification of a2 + b2 = c2, throughout its movement, while proving the famous theorem.

 

The source code of the animation is as follows:

<script type = 'text/javascript' >
var canvas = document.getElementById('Canvas_Six');
var ctx= canvas.getContext('2d');
var x,y,i=0;
function draw(){
i=i+0.25;
if (i==360){i=0;}
var hor=140*Math.cos(i),ver=140*Math.sin(i);
x=200+hor; y=200+ver;
var a = Math.round(Math.pow((Math.pow(140-hor,2) + Math.pow(ver,2)),0.5));
var b = Math.round(Math.pow((Math.pow(140+hor,2) + Math.pow(ver,2)),0.5));
ctx.clearRect(0,0,400,400);
ctx.beginPath();
// Red circle
ctx.arc(200,200,140,0,2*Math.PI);
ctx.strokeStyle="red";
ctx.lineWidth=3;
ctx.stroke();
ctx.beginPath();
// green line
ctx.moveTo(60,200);
ctx.lineTo(x,y);
ctx.lineWidth=2;
ctx.strokeStyle="green";
ctx.stroke();
//yellow line
ctx.beginPath();
ctx.moveTo(340,200);
ctx.lineTo(x,y);
ctx.lineWidth=2;
ctx.strokeStyle="yellow";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(60,200);
ctx.lineTo(340,200);
ctx.lineWidth=2;
ctx.strokeStyle="blue";
ctx.stroke();
ctx.beginPath();
ctx.font="20px verdana";
ctx.fillText('a = ' + a,20,335);
ctx.fillStyle="green";
ctx.fill();
ctx.beginPath();
ctx.font="20px verdana";
ctx.fillText('b = ' + b,20,360);
ctx.fillStyle="yellow";
ctx.fill();
/*ctx.beginPath();
ctx.font="20px verdana";
ctx.fillText('c = ' + 300,20,380);
ctx.fillStyle="blue";
ctx.fill();*/
}
window.setInterval('draw()',1000);
</script>

 

All Canvas Animations