Tehnici Web

Canvas & SVG

Claudia Chiriță . 2023/2024

Canvas

<canvas> element HTML folosit pentru a desena via scripturi (de regulă cod JavaScript)
permite desenarea de grafice, editare de imagini, creare de animații simple
dimensiune default: 300px X 150px

rendering context

elementul <canvas> crează o suprafață de desen de dimensiune fixă, ce afișează unul sau mai multe contexte de randare
contextele de randare sunt folosite pentru crerea și manipularea conținutului afișat
ne concentrăm pe contextul de randare 2D

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

grid - spațiu de coordonate

o unitate în grid corespunde unui pixel pe canvas
originea gridului este în colțul din stânga sus, la coordonatele (0,0)

Figuri primitive

dreptunghiuri

fillRect(x, y, width, height)
// desenează un dreptunghi plin

strokeRect(x, y, width, height)
// desenează un contur de dreptunghi

clearRect(x, y, width, height)
// șterge zona dreptunghiulară, făcând-o transparentă

Paths

liste de puncte conectate de segmente de linii care pot fi curbate, pot avea grosimi și culori diferite
un path poate fi închis cu closePath()
pentru a crea figuri folosind paths:
1. creăm path-ul cu beginPath()
2. folosim comenzi de desenat în path
3. adăugăm contur cu stroke() ori umplem path-ul cu fill() pentru a îl randa

Arce de cerc

arc(x, y, radius, startAngle, endAngle, counterclockwise)
/* arc centrat în (x, y) cu raza r 
   începând de la startAngle și până la endAngle, 
   în direcția dată de counterclockwise */

arcTo(x1, y1, x2, y2, radius)
/* arc cu punctele de control și raza date, 
   conectat la punctul anterior printr-o linie dreaptă */

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="demo.css">
    <script>
       window.onload = function() {
        draw();
       }     
       
       function draw() {
        const canvas = document.getElementById("tutorial");
        if (canvas.getContext) {
          const ctx = canvas.getContext("2d");
          ctx.fillStyle = "pink";
          ctx.strokeStyle = "pink";
          
          for (let i = 0; i < 4; i++) {
            for (let j = 0; j < 3; j++) {
               ctx.beginPath();
               const x = 25 + j * 50; // x coordinate
               const y = 25 + i * 50; // y coordinate
               const radius = 20; // arc radius
               const startAngle = 0; // starting point on circle
               const endAngle = Math.PI + (Math.PI * j) / 2; // end point on circle
               const counterclockwise = i % 2 !== 0; // clockwise or counterclockwise

ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);

if (i > 1) {
                ctx.fill();
              } else {
                ctx.stroke();
              }
         }
    }
          
   }
 }
   </script>
  </head>
  <body>
      <canvas id="tutorial" width="150" height="200"></canvas>
  </body>  
</html>

Curbe Bézier

quadraticCurveTo(cp1x, cp1y, x, y)
/* curbă Bézier cuadratică de la poziția curentă 
   la punctul specificat de x și y, 
   folosind punctul de control (cp1x, cp1y) */

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
/* curbă Bézier cubică de la poziția curentă 
   la punctul specificat de x și y, 
   folosind punctele de control 
   (cp1x, cp1y) și (cp2x, cp2y) */

citește mai multe despre curbe Bézier

Curbe Bézier

Obiecte Path2D

folosim obiecte Path2D pentru a simplifica codul și îmbunătăți performanța, înregistrând comenzile de desen
putem folosi toate metodele de path de mai devreme (moveTo, rect, arc etc.)
putem combina path-uri:

Path2D.addPath(path [, transform])
/* adaugă un path la path-ul curent 
   cu o matrice de transformare opțională */

Obiecte Path2D

Stiluri și culori

culori

fillStyle = color; 
strokeStyle = color;

transparență

globalAlpha = transparencyValue; // valori în [0, 1]

Stiluri și culori

stiluri linie

lineWidth = value; 
lineCap = type; // butt, round, square
lineJoin = type; // round, bevel, miter   

getLineDash(); // patternul de linie dash curent 
setLineDash(segments); // setează patternul de linie dash
lineDashOffset = value; // unde să încheapă patternul dash

Stiluri și culori

gradienți

createLinearGradient(x1, y1, x2, y2)
// gradient liniar de la (x1,y1) la (x2,y2)      
    
createRadialGradient(x1, y1, r1, x2, y2, r2)
/* gradient radial: un cerc cu centrul în (x1,y1) și raza r1
   și unul cu centrul în (x2, y2) și raza r2 */
   
createConicGradient(angle, x, y) 
/* gradient conic cu unghi de angle radiani
   la poziția (x, y) */

Stiluri și culori

pattern

createPattern(image, type)
/* image: sursa unei imagini
   type: repeat, repeat-x, repeat-y, no-repeat */

Stiluri și culori

umbre

shadowOffsetX = float; 
// distanța orizontală de la obiect
shadowOffsetY = float;          
// distanța verticală de la obiect
shadowBlur = float; 
shadowColor = color;

Text

fillText(text, x, y [, maxWidth]);
strokeText(text, x, y [, maxWidth]);

font = value; // default: 10px sans-serif
textAlign = value; // start, end, left, right, center
textBaseline = value; /* top, hanging, middle, 
                         alphabetic, ideographic, bottom */
direction = value; // ltr, rtl, inherit

Text

Imagini

const img = new Image(); // crează element img nou
img.addEventListener("load", () => {
    // execute drawImage statements here
    }, false);
img.src = "myImage.png"; // source path

drawImage(image, x, y); 
// desenează o imagine la poziția (x,y)
drawImage(image, x, y, width, height); 
// + scalare
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
/* ia din imaginea sursă un dreptunghi cu colțul din stânga 
   sus la (sx, sy) și cu lățimea sWidth și înălțimea sHeight
   și o desenează în canvas la poziția (dx, dy), scalând-o */

Canvas state

save(); // salvează starea canvasului
restore(); // restaurează cel mai recent salvată stare

o stare de desen a canvasului constă din

valorile atributelor: strokeStyle, fillStyle, globalAlpha, lineWidth, lineDashOffset, shadowOffsetX, font etc.
transformările care au fost aplicate: translate, rotate, scale
clipping path curent

Transformări

translate(x, y); 
// mișcă canvasul și originea pe grid cu distanțele x și y
rotate(angle); // rotirea canvasului în jurul originii
scale(x, y); /* scalarea canvasului cu x și y unități; 
                valori nr. reale */
transform(a, b, c, d, e, f); 
/* înmulțeste matricea de transformare curentă cu
   matricea dată prin argumente */

Composite

globalCompositeOperation = type; 
// tipul de compunere la desenarea unor figuri noi

source-over, source-in, source-out
destination-over, destination-in, destination-out
lighter, copy, xor, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light
difference, exclusion, hue, saturation, color, luminosity

Clipping

clipping path: mascarea unei zone din canvas

clip(); // path-ul construit devine clipping path-ul curent

folosim clip() în loc de closePath() pentru a închide un path și a-l transforma într-o mască în loc să îl umplem (fill) sau conturăm (stroke)

Text

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="demo.css">
    <script>
       window.onload = function() {
       
	function draw() {
	  const ctx = document.getElementById("canvas").getContext("2d");
	  ctx.fillRect(0, 0, 150, 150);
	  ctx.translate(75, 75);

// Create a circular clipping path
	  ctx.beginPath();
	  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
	  ctx.clip();

// draw background
	  const lingrad = ctx.createLinearGradient(0, -75, 0, 75);
	  lingrad.addColorStop(0, "#232256");
	  lingrad.addColorStop(1, "#143778");

ctx.fillStyle = lingrad;
	  ctx.fillRect(-75, -75, 150, 150);

// draw stars
	  for (let j = 1; j < 50; j++) {
	    ctx.save();
	    ctx.fillStyle = "#fff";
	    ctx.translate(
	      75 - Math.floor(Math.random() * 150),
	      75 - Math.floor(Math.random() * 150)
	    );
	    drawStar(ctx, Math.floor(Math.random() * 4) + 2);
	    ctx.restore();
	  }
	}

Animații

pași pentru desenarea unui frame:

clear canvas: putem folosi clearRect()
salvarea stării canvasului
desenarea figurilor de animat
restaurarea stării canvasului

Animații

update-uri programate:

setInterval();
setTimeout();
requestAnimationFrame(callback);
/* cere browserului să apeleze funcția callback pentru a
   actualiza o animație înainte de următoarea redesenare */

Animații

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="demo.css">
    <script>
       window.onload = function() {
       
	function clock() {
  const now = new Date();
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  ctx.save();
  ctx.clearRect(0, 0, 150, 150);
  ctx.translate(75, 75);
  ctx.scale(0.4, 0.4);
  ctx.rotate(-Math.PI / 2);
  ctx.strokeStyle = "black";
  ctx.fillStyle = "white";
  ctx.fill();
  ctx.lineWidth = 8;
  ctx.lineCap = "round";

// Hour marks
  ctx.save();
  for (let i = 0; i < 12; i++) {
    ctx.beginPath();
    ctx.rotate(Math.PI / 6);
    ctx.moveTo(100, 0);
    ctx.lineTo(120, 0);
    ctx.stroke();
  }
  ctx.restore();

// Minute marks
  ctx.save();
  ctx.lineWidth = 5;
  for (let i = 0; i < 60; i++) {
    if (i % 5 !== 0) {
      ctx.beginPath();
      ctx.moveTo(117, 0);
      ctx.lineTo(120, 0);
      ctx.stroke();
    }
    ctx.rotate(Math.PI / 30);
  }
  ctx.restore();

const sec = now.getSeconds();
  const min = now.getMinutes();
  const hr = now.getHours() % 12;

ctx.fillStyle = "black";

// Write Hours
  ctx.save();
  ctx.rotate(
    (Math.PI / 6) * hr + (Math.PI / 360) * min + (Math.PI / 21600) * sec
  );
  ctx.lineWidth = 14;
  ctx.beginPath();
  ctx.moveTo(-20, 0);
  ctx.lineTo(80, 0);
  ctx.stroke();
  ctx.restore();

// Write Minutes
  ctx.save();
  ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
  ctx.lineWidth = 10;
  ctx.beginPath();
  ctx.moveTo(-28, 0);
  ctx.lineTo(112, 0);
  ctx.stroke();
  ctx.restore();

// Write seconds
  ctx.save();
  ctx.rotate((sec * Math.PI) / 30);
  ctx.strokeStyle = "#D40000";
  ctx.fillStyle = "#D40000";
  ctx.lineWidth = 6;
  ctx.beginPath();
  ctx.moveTo(-30, 0);
  ctx.lineTo(83, 0);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
  ctx.stroke();
  ctx.fillStyle = "rgba(0, 0, 0, 0)";
  ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
  ctx.fill();
  ctx.restore();

ctx.beginPath();
  ctx.lineWidth = 14;
  ctx.strokeStyle = "#325FA2";
  ctx.arc(0, 0, 142, 0, Math.PI * 2, false);
  ctx.stroke();

ctx.restore();

window.requestAnimationFrame(clock);
}

window.requestAnimationFrame(clock);
 
 }
   </script>
  </head>
  <body>
      <canvas id="canvas" width="300" height="300"></canvas>
  </body>  
</html>

limbaj de marcare bazat pe XML pentru descrierea de elemente grafice vectoriale 2D
standard Web open bazat pe text, dezvoltat de W3C din 1999
imaginile SVG sunt definite în fișiere XML și pot fi randate la orice dimensiune fără pierderea calității

SVG

suportat de toate browserele principale
bine integrat cu CSS, DOM, JavaScript
interfață DOM; nu necesită extensii third-party
dezvantaj: încărcarea unei imagini SVG poate fi lentă
fișierele SVG pot fi create și cu aplicații de desenat vectoriale precum Inkscape

ingrediente principale

un document SVG constă din rădăcina <svg> și elemente pentru figuri de bază
elemente pentru figuri geometrice (cercuri, dreptunghiuri) și curbe (simple și complexe)
figurile pot fi grupate folosind elementul <g>
SVG permite definirea de gradienți, rotații, efecte de filtrare, animații și interactivitatea cu JavaScript

Sintaxă

fiind bazat pe XML, SVG e case-sensitive: atenție la majuscule în cazul elementelor și al atributelor
valorile atributelor se scriu între ghilimele, chiar și cele numerice

EXEMPLU

Proprietăți

ordinea randării elementelor: elementele noi sunt adăugate peste elementele mai vechi
codul SVG poate fi adăugat direct în pagini HTML

<iframe src="image.svg"></iframe>

grid - spațiu de coordonate

o unitate în grid corespunde unui pixel
originea gridului este în colțul din stânga sus, la coordonatele (0,0)
pixeli? scalare?

elementul <path> - forma pathului este dată de atributul "d" ce conține o serie de comenzi (specificate prin câte o literă) și parametri pentru acele comenzi
fiecare comandă are două variante: o literă majusculă pentru coordonate absolute în pagină, și una minusculă pentru coordonate relative

Paths

comenzi pentru linii:

Move To: M x y
Line To: L x y
Horizontal Line: H x. Vertical Line: V y
Close Path: Z

Paths

comenzi pentru curbe:

Curbe Béziers cubice: C x1 y1, x2 y2, x y
Curbe Béziers cuadratice: Q x1 y1, x y
Arce de cerc:
A rx ry x-axis-rotation large-arc-flag sweep-flag x y

Fills & strokes

folosind atributele

fill și stroke
stroke-width, stroke-linecap, stroke-linejoin,
stroke-dasharray, stroke-dashoffset

Gradienți

folosind elementele

<linearGradient> împreună cu noduri <stop> și atributele offset, stop-color, stop-opacity
<radialGradient> împreună cu noduri <stop> și atribute pentru setarea punctelor de centru și focale
se adaugă într-un element <defs> și trebuie să aibă un atribut id

Paths

Alte Elemente

Transformări

atributul transform cu valorile:

Canvas vs. SVG

         
                           WW
                          /__\ 
                         | oo |   _WWWWW_
              (o)(o)    (|_()_|) /  o o  \    întrebări?
            w"      "w    \__/ (|  __O__  |)
           W  -====-  W  /|\/|\  \ \___/ /
            "w      w"  |||||||| /-------
            w"""""""""w |||||||||=========|
          W            W|||||||||=========|