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>

 

 

 

 

 

 

Resources at Fingertips

There is a significant selection of tutorials here, covering ASP.Net, HTML5, CSS3 and JavaScript. They are categorized clearly for you to access them easily on any device - desktops/laptops, smartphones and laptops.
There are quite a few of them on HTML5 Canvas and CSS3. In addition, there are tutorials on JavaScript and ASP.Net too.

Email: 

Stand Out - from the crowd

students

"There's no such thing as a free lunch."

The best things in nature are free with no strings attached - fresh air, breathtakingly warm sunshine, scene of meadow on the horizon...

Vivax Solutions, while mimicking nature, offers a huge set of tutorials along with interactive tools for free.

Please use them and excel in the sphere of science education.

Everything is free; not even registration is required.

 

 

Recommended Reading

 

The best book to master HTML5 canvas animations. The author tells you how to manipulate the canvas element with JavaScript in a progressive way - starting from the easier to harder worked examples. It is ideal for anyone who wants to be a game developer in HTML5.

Advertisements

Advertisement