HTML5 Canvas 2-D Animations - Vernier Caliper

You will learn in this tutorial:

  • How to make a Vernier Scale against a main millimetre scale.
  • How to slide the the Vernier Scale against the main scale to measure small movements.
  • How to display the readings in sync with the movement of the Vernier Scale.

The animation is fully interactive: it uses the data from HTML5 range input element, as you move the slider along it. The measurements are highly accurate.

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:

 



Please move the slider and study the readings.

If you want to learn how the calculations are made, please click here.

The Code for the animation is as follows:

<script>
{
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var a = 0, b;
function ver(a) {
a = eval(document.getElementById('ran').value);
context.clearRect(0, 0, 500, 400);
//main scale
context.beginPath();
context.moveTo(15, 100);
context.lineTo(450, 100);
context.lineTo(450, 150);
context.lineTo(50, 150);
context.lineTo(50, 200);
context.lineTo(40, 190);
context.lineTo(15, 160);
context.lineTo(15, 100);
context.closePath();
context.lineWidth = 2;
context.fillStyle = 'grey';
context.fill();
// main scale - numerals
context.font = 'bold 10pt Calibri';
context.fillStyle = 'black';
context.fillText(0, 48, 125);
context.fillText(1, 148, 125);
context.fillText(2, 248, 125);
context.fillText(3, 348, 125);
context.fillText('cm', 428, 125);
// main scale - big ticks
for (var i = 50; i < 450; i = i + 100) {
context.beginPath();
context.moveTo(i, 130);
context.lineTo(i, 150);
context.strokeStyle = 'white';
context.stroke();
}
// main scale - small ticks
for (var i = 50; i < 450; i = i + 10) {
context.beginPath();
context.moveTo(i, 140);
context.lineTo(i, 150);
context.strokeStyle = 'white';
context.stroke();
}
//vernier scale
context.beginPath();
context.moveTo(50 + a, 150);
context.lineTo(150 + a, 150);
context.lineTo(150 + a, 200);
context.lineTo(50 + a, 200);
context.lineTo(50 + a, 150);
context.fillStyle = 'lightgrey'; context.fill();
// ticks
for (var i = 50; i <= 140; i = i + 9) {
context.beginPath();
context.moveTo(i + a, 150);
context.lineTo(i + a, 170);
context.strokeStyle = 'black';
context.stroke();
context.closePath();
// numerals
context.font = 'bold 8pt Calibri';
context.fillStyle = 'black';
context.fillText(0, 52 + a, 180);
context.fillText(5, 95 + a, 180);
context.fillText(10, 135 + a, 180);
}
//spring
context.beginPath();
context.moveTo(50, 165);
context.lineTo(50 + a, 165 + 2 * Math.sin(a));
context.lineWidth = 3;
context.strokeStyle = 'red';
context.stroke();
context.closePath();
// readings
context.font = '10pt Calibri';
context.fillStyle = 'blue';
context.fillText(a / 10 + ' mm', 50 + a / 2, 220);
}
window.onload = ver();
</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