Animația pe canvas
Combinarea desenării diferitelor figuri pe canvas cu utilizarea funcției requestAnimationFrame() permite crearea unei animații a conținutului elementului canvas.
Animația presupune schimbarea secvențială a cadrelor, fiecare cadru al animației trebuind desenat manual. În general, pentru a crea o animație, ar trebui să urmăm următorii pași:
- Curățarea zonei de desen
- Salvarea opțională a stării
- Desenarea unui cadru individual
- Restaurarea opțională a stării
Acești pași sunt de obicei încapsulați într-o funcție, care apoi este apelată la intervale regulate de timp (pentru fiecare cadru al animației). Pentru executarea funcției se utilizează metoda requestAnimationFrame(), care este special destinată pentru lucrul cu animația pe paginile web.
De exemplu, definim următoarea pagină:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<canvas id="canvas" width="400" height="250" style="background-color: #eee; border-color: #ccc;"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
let x = 0;
let step = 1;
function draw() {
context.clearRect(0,0,400,250); // curățăm zona de desen
context.fillStyle = "red";
context.fillRect(x,10,40,40); // desenăm dreptunghiul
if(x >= 360) step = -1;
if(x <= 0) step = 1;
x += step;
window.requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>
Aici, funcția draw() conține codul care desenează un dreptunghi. Primul apel al funcției declanșează desenarea primului cadru al animației. La finalul apelului funcției, se cheamă metoda requestAnimationFrame, căreia i se transmite aceeași funcție draw, declanșând astfel animația.
Astfel, funcția draw() se auto-apelază continuu pentru a desena un nou cadru al animației. Esența animației constă în schimbarea coordonatei x a dreptunghiului. La fiecare desenare, dreptunghiul este afișat într-o nouă poziție, creând iluzia mișcării sale.
În mod similar, se pot anima întregi compoziții de figuri:
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
function draw() {
context.clearRect(0,0,500,300); // curățăm zona de desen
const time = new Date();
// unghiul pentru rotația dreptunghiurilor
const angle = ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds();
context.fillStyle = "red";
context.save();
context.translate(150,150);
context.rotate(angle);
context.translate(0,25);
context.fillRect(5,5,20,20); // dreptunghiul roșu
context.restore();
context.fillStyle = "yellow";
context.save();
context.translate(150,150);
context.rotate(angle);
context.translate(0,50);
context.fillRect(5,5,20,20); // dreptunghiul galben
context.restore();
context.fillStyle = "green";
context.save();
context.translate(150,150);
context.rotate(angle);
context.translate(0,75);
context.fillRect(5,5,20,20); // dreptunghiul verde
context.restore();
window.requestAnimationFrame(draw);
}
draw();