JS canvas based animation tutorial

JS Animation Tutorial
based on canvas
What can you do after reading this tutorial?
Here are a few animated examples arranged in order of increasing complexity of creation:

Preparation

To create an interesting animation, create a new canvas and prepare a script element for it:

<!-- встраиваемый холст -->
<canvas width=300 height=500 id=my-canvas>
</canvas>

<script>
  <!-- весь остальной код будет писаться внутри этого тэга -->
</script>

You can specify your canvas sizes. I will use the size 300 for 500 points.

Also, the script element does not have to be near the canvas, the main thing is that your script can find it.

What we will create
This part of the tutorial will be devoted to a simple animation, such as in the first example.
Let's create a simple effect of divergent waves. This animation can be used to indicate the download or something else. =)

Frame

At the very beginning of the script, write the following code:

  var canvas = document.getElementById ('my-canvas');
var ctx = canvas.getContext ('2d');

ctx.fillStyle = 'black';   // background 
 ctx.strokeStyle = 'cyan';   // shape contour 
 ctx.lineWidth = 4;   // contour thickness  
       And now a list of the main functions that I will use when creating almost every animation: 
      
  update ()  is a function that updates all animated shapes. (no template implementation) 
      
  draw ()  - clears the canvas, paints all objects, and  does nothing more . 
      
  loop ()  - the main loop of the entire animation. Causes the data to be updated and the canvas is repainted. Most often it looks like this: 
      
(function loop() {
  // создание зацикливания
  window.requestAnimationFrame(loop);
  
  update();
  draw();
})(); // autorun

Animation model outline

The whole essence of this animation is that at regular intervals in the center a new ring is created, which eventually grows in size until it becomes too large and does not retire.
What are the rings? I think it's enough to define the rings only by their radii , because more they do not differ from each other .


Code
Let's create an array in which the rings (their radii) will be stored, and several functions for manipulating them:
var rings = []; function createNewRing() { // добавляем в массив кольцо радиуса 0 rings.push(0); } function growRings(value) { // увеличиваем все кольца на value for(var i = 0; i < rings.length; i++) rings[i] += value; } function filterRings(r) { // удаляем все кольца больше данного радиуса while(rings[0] > r) rings.shift(); }

The implementation of the last function may seem unusual if you do not pay attention to the fact that the array is defined in such a way that the rings in it are located in the non-increasing order .

[0] // добавим новое кольцо [0, 0] // увеличим все на 3 [3, 3] // + ещё одно кольцо [3, 3, 0] // опять увеличим [4, 4, 1] // порядок сохраняется // от большего к меньшему

Now write the functions that will ensure the display of rings on the canvas:

function drawRing(r) { // рисует кольцо данного радиуса // (150, 250) - координаты центра холста ctx.beginPath(); ctx.arc(150, 250, r, 0, 2*Math.PI); ctx.stroke(); } function clearCanvas() { // окрашивает холст фоновым цветом // (300, 500) - размеры холста ctx.fillRect(0, 0, 300, 500); }

Finally, the last three functions linking everything together:

function update() { createNewRing(); growRings(5); filterRings(200); } function draw() { clearCanvas(); rings.map(drawRing); } (function loop() { window.requestAnimationFrame(loop); update(); draw(); })();

Even if you did everything right, the result will not greatly please you. The thing is, everything happens too fast . In order to create new rings at certain time intervals (1 second), we use the function Date.now () :

var lastTime = 0; function update() { if(Date.now() - lastTime > 1000) { createNewRing(); lastTime = Date.now(); } growRings(5); filterRings(200); }

Let's also change the speed of the 'growth' of the rings, given that the average cycle runs 60 times per second:

var lastTime = 0; function update() { if(Date.now() - lastTime > 1000) { createNewRing(); lastTime = Date.now(); } growRings(50 / 60); // 50 точек в секунду filterRings(200); }

Result

Now you know how to make a simple animation using the canvas:)


// show all the code ...

js tutorial by Rull Deef ( translated english version )