Canvas API

API-ul Canvas și contextul său Desenarea dreptunghiurilor

Unul dintre modurile comune de a lucra cu grafica în limbajul JavaScript este Canvas API, care presupune lucrul cu elementul canvas. Acest element reprezintă o zonă de desen, la care se poate accesa în codul JavaScript și pe care se pot desena diverse forme, plasa imagini, chiar manipula video și altele. În particular, multe jocuri pe HTML5+JavaScript sunt realizate tocmai cu ajutorul Canvas API.

Exemplu de definire simplă a elementului canvas pe o pagină web:

<canvas id="canvas" width="500" height="300"></canvas>

De obicei, pentru elementul canvas se specifică un identificator pentru a simplifica selecția acestuia în codul JavaScript. Și, de asemenea, adesea se stabilesc atributele de lățime și înălțime. Dacă aceste atribute sunt omise, atunci implicit canvas va avea o lățime de 300 de pixeli și o înălțime de 150 de pixeli.

Contextul de randare

Pentru a gestiona zona de desen canvas și conținutul său, este necesar să se obțină contextul de randare folosind metoda getContext() a elementului canvas:

canvas.getContext(contextId, [config])

Ca prim parametru obligatoriu, această metodă primește identificatorul contextului, iar ca al doilea parametru opțional - un obiect de setări de configurare.

Putem folosi următoarele identificatoare de context:

2d: context pentru randarea graficii 2D. La transmiterea acestui identificator metodei getContext(), această metodă returnează un obiect de tip CanvasRenderingContext2D.
webgl: context pentru randarea graficii 3D folosind tehnologia WebGL versiunea 1. La transmiterea acestui identificator metodei getContext(), această metodă returnează un obiect de tip WebGLRenderingContext.
webgl2: context pentru randarea graficii 3D folosind tehnologia WebGL versiunea 2. La transmiterea acestui identificator metodei getContext(), această metodă returnează un obiect de tip WebGL2RenderingContext.

Este de remarcat că, deși toate browserele moderne suportă mai mult sau mai puțin toate cele trei contexte, de exemplu, suportul pentru ultimul context webgl2 a început să fie implementat din 2017, iar în Safari a fost implementat cel mai recent - în 2021.

De exemplu, obținerea contextului 2d pentru desenarea graficii 2D:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

Deoarece WebGL are multe caracteristici specifice, în continuare, lucrul cu Canvas API va fi examinat tocmai pe exemplul contextului 2D. Pentru mai multe detalii despre WebGL se poate citi în ghidul WebGL.

Înainte de a trece direct la desenare, este important să înțelegem cum este organizat sistemul de coordonate în canvas.

Contextul 2D se bazează pe un sistem de coordonate bidimensional. Originea acestui sistem de coordonate este coordonata (0,0) în colțul din stânga sus al zonei de desen. Elementele grafice (dreptunghiuri, cercuri etc.) sunt desenate în zona de desen relativ la această coordonată de origine.

Desenarea dreptunghiurilor

Pentru desenarea dreptunghiurilor, obiectul CanvasRenderingContext2D oferă o serie de metode:

clearRect(x, y, w, h): curăță o anumită zonă dreptunghiulară, colțul din stânga sus al căreia are coordonatele x și y, lățimea egală cu w, iar înălțimea egală cu h
fillRect(x, y, w, h): umple cu culoare un dreptunghi, colțul din stânga sus al căruia are coordonatele x și y, lățimea egală cu w, iar înălțimea egală cu h
strokeRect(x, y, w, h): desenează conturul unui dreptunghi fără a-l umple cu o anumită culoare

De exemplu, să desenăm pe o pagină web cel mai simplu dreptunghi folosind fillRect():

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<canvas id="canvas" width="400" height="250"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.fillRect (10, 10, 100, 100);
</script>
</body>
</html>

Aici umplem o zonă dreptunghiulară cu o lățime de 100 de pixeli și o înălțime de 100 de pixeli, colțul din stânga sus al căreia este situat la punctul (x=10, y=10).

Prin default, pentru umplere se aplică culoarea neagră. În articolul următor vom vedea cum se poate seta culoarea.

Metoda fillRect() umple zona fără a desena o graniță, metoda strokeRect, dimpotrivă, desenează doar granița. De exemplu, să modificăm codul JavaScript în modul următor:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.strokeRect (10, 10, 100, 100);

Aici desenăm un dreptunghi cu coordonate, lățime și înălțime similare, doar cu o graniță și fără umplere. De asemenea, prin default, pentru culoarea conturului se aplică culoarea neagră.

Spre deosebire de strokeRect și fillRect, metoda clearRect curăță o anumită zonă. De fapt, această zonă dobândește culoarea pe care ar fi avut-o dacă nu s-ar aplica funcțiile strokeRect și fillRect. De exemplu:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.fillRect (10, 10, 100, 100);
context.clearRect(15, 15, 90, 90);

În acest caz, mai întâi umplem cu culoare neagră o zonă dreptunghiulară, apoi în interiorul acesteia curățăm cu clearRect o zonă dreptunghiulară mai mică.

În mod similar, putem crea compoziții mai complexe:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.fillRect (10, 10, 80, 80);            // Desenăm capul  
context.clearRect (20, 20, 60, 20);           // Curățăm locul pentru ochi    
context.fillRect (30, 25, 10, 10);            // Desenăm ochiul stâng    
context.fillRect (60, 25, 10, 10);            // Desenăm ochiul drept      
context.clearRect (25, 60, 50, 10);           // Desenăm gura