Creating 2-D Animations on Canvas - interactive colour ball

In this tutorial, you will learn the following:

  • How to create any colour using the three primary colours - red, blue and green.
  • How to make 16-million colours using a value between 0 and 255 for each primary colour.
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:

Interactive Colour Ball

The animation allows you to use the three primary colours - red, gree and blue - to produce any other colour that you can think of.

In theory, it can produce 16-million colours, depending on the values of red, green and blue.


Red:        0   255

Green:  0   255

Blue:     0   255

 

The range element may not work with Mozilla Firefox.



The Code for Interactive Colour Ball

<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var radr;var radg;var radb;
function fun() {
// red value;
radr=eval(document.getElementById('redp').value);
// green value;
radg=eval(document.getElementById('greenp').value);
// blue value;
radb=eval(document.getElementById('bluep').value);
// rgb value for fillStyle
var col='rgb('+radr+','+radg+','+radb+')';
context.clearRect(0,0,400,300);
context.beginPath();
// colour circle
context.arc(200,150,100,0,2*Math.PI,false);
context.fillStyle=col;
context.fill();
}
</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