3. Canvas
El Canvas d'HTML5 és un element (<canvas>) que actua com un llenç en blanc. Per si mateix, no dibuixa res; és simplement un contenidor rectangular. El seu veritable poder prové de JavaScript.
Mitjançant l'API de Canvas, podem dibuixar gràfics dinàmicament: línies, formes geomètriques, text, imatges i fins i tot crear animacions complexes fotograma a fotograma. És una eina de mode immediat (dibuixa píxels i s'oblida), a diferència de SVG (que reté la informació dels objectes).
Per començar a dibuixar, primer has d'obtenir el seu "context" de dibuix (normalment, el 2D):
<canvas id="meuLlenc" width="500" height="300"></canvas>
Al JavaScript: const canvas = document.getElementById('meuLlenc');
const ctx = canvas.getContext('2d');
Aquest objecte ctx és el teu "pinzell" i a partir d'aquí, utilitzes els seus mètodes per crear el contingut que es desitja. Aquest objecte és la base fonamental per a jocs 2D, visualització de dades (gràfics) i eines d'edició d'imatges directament al navegador.
Fonaments de canvas
Què és HTML Canvas? Definició: Una API de JavaScript per dibuixar gràfics en "mode ràste...
Introducció
L'element <canvas> d'HTML5 és un dels pilars de la web moderna, especialment per a gràfics intera...
Configuració inicial canvas
La configuració inicial per fer servir HTML Canvas és bastant directa, necessites dues coses: ...
Dibuix 2D
La part més important per entendre com dibuixar, si el <canvas> és el llenç, el context és la com...
El sistema de coordenades
Entendre el sistema de coordenades és el pilar fonamental per dibuixar qualsevol cosa al <canvas>...
Exemple: Visualitzador de coordenades a canvas
Aquest exemple és un excel·lent punt de partida per a entendre el sistema de coordenades del rato...
Les formes bàsiques
Rectangles (La forma més senzilla) fillRect(x, y, ample, alt): Dibuixar un rectangle ple...
Dibuix de rectangles, una figura bàsica
Començar amb els rectangles és la millor manera d'entendre les funcions bàsiques de dibuix al Can...
Colors i transparències fillStyle i strokeStyle
Assolir els conceptes de fillStyle i strokeStyle és fonamental, ja que controlen l'aparença de to...
Linies i paths en canvas
Aprofundirem en el concepte de "Path" (camí o traçat), que és la columna vertebral del dibuix de ...
Dels path a figures tancades
Aquests dos mètodes són els que permeten convertir un conjunt de línies (lineTo) en una figura sò...
Arcs i cercles
El dibuix de cercles i arcs es beneficia enormement d'una millor visualització de l'ús dels angle...
Exemple: Rentangle arrodonit amb arcTo
Un dels usos més pràctics i il·lustratius de ctx.arcTo() és, precisament, crear un rectangle amb ...
Exemple: Un oval
Aquest exemple és excel·lent per introduir la transformació de scale(), ja que mostra la complexi...
Exemple: Les el·lipses
El mètode ctx.ellipse() és la manera moderna i preferida per dibuixar òvals i el·lipses al Canvas...
Estilització i text
Estils de Línia lineWidth: Gruix de la línia. lineCap: Acabament de la línia ('butt...
Línies discontinues
Una manera molt enginyosa de fer línies discontínues és utilitzant un bucle for i crides repetide...
Linea discontinua animada
El mètode ctx.lineDashOffset és perfecte per crear la il·lusió d'una línia que es mou, com si fos...
Text dins canvas
El Canvas ofereix un control excel·lent sobre l'aparença i, especialment, la posició exacta del t...
Aprofundiment en ctx.measureText(text)
ctx.measureText() ens permet adaptar dinàmicament la mida del text a un contenidor. Aquesta és la...
Ajust de text automàtic. Word wrapping
El mètode ctx.measureText().width no només serveix per escalar text, sinó que és l'única eina dis...
Ombres i degradats
Ombrejat (Shadows) Les propietats d'ombra del Canvas afecten qualsevol operació de dibuix poster...
Creació i ús de patrons
L'ús de patrons (patterns) amb ctx.createPattern() és una tècnica avançada que permet omplir o tr...
Transformacions
Les transformacions del Canvas permeten manipular el sistema de coordenades (i no els píxels ja d...
Transformant el sistema de coordenades (translate, rotate, scale)
Les transformacions translate(), rotate(), i scale() són el fonament de qualsevol dibuix complex ...
Exemple: Un text amb reflex
Aquest codi combina tres transformacions clau per aconseguir un efecte visual concret: l'efecte d...
Exemple: Rellotge analògic animat
Dibuixar un rellotge amb Canvas és ideal perquè no cal calcular les coordenades X i Y de la punta...
Treballant amb imatges
El Canvas de HTML5 ha transformat el navegador en una potent eina de processament i visualització...
Carregar imatges
Per carregar i manipular imatges dins d'un Canvas, utilitzem l'objecte Image de JavaScript i el m...
Manipulació directa de pixels (ImageData)
Aquest és un tema avançat i molt potent dins de Canvas: la manipulació directa de píxels. Aquesta...
Canvas to Data URI (toDataURL)
El Canvas de HTML5 té la capacitat de serialitzar el seu contingut de dibuix (píxels) en un forma...
Exemple: marca d'aigua en canvas
Aquest codi és un excel·lent exemple pràctic de com el Canvas s'utilitza per a tasques d'utilitat...
Exemple: inversió de colors o BN
Aquest exemple mostra la manipulació de píxels per aplicar un filtre (en aquest cas, la inversió ...
Exemple: conversió escala grisos o sepia
Aquest codi implementa un dels filtres d'imatge més fonamentals mitjançant la manipulació directa...
Exemple: Generació dinàmica favicon
Aquest codi és un exemple excel·lent de com utilitzar el Canvas de HTML5 combinat amb toDataURL()...
Animació, el llenç s'anima
bucle animació (game loop): setInterval o requestAnimationFrame el cicle: netejar, actualitzar, ...
Introducció
El Canvas de HTML5 és la tecnologia més utilitzada per crear animacions i gràfics dinàmics d'alt ...
El game loop
El Game Loop (o Bucle de Joc) és el cor de qualsevol aplicació interactiva, especialment en el de...
La coordenada del ratolí al canvas
Implementarem la tècnica fonamental per obtenir les coordenades del ratolí relatives a l'origen d...
Exemple: Click en un cercle
La detecció de clics o interaccions complexes dins d'un Canvas (com ara col·lisions entre el punt...
Detecció de col·lisions, isPointInPath()
La funció isPointInPath() del Canvas 2D API és una eina fonamental per a la detecció de col·lisio...
Altres metodes detecció col·lisions
A part d'utilitzar la funció isPointInPath() (que és el mètode propi del Canvas per a la detecció...
Detecció clics per pixel Alpha
Aquí tenim un exemple complet i detallat de detecció de col·lisions basades en el Canal Alfa (o p...
Exemple: Tag HTML5 <video>
Aquest exemple de codi HTML, CSS i JavaScript crea un reproductor de vídeo personalitzat per a un...
Exemple: video on canvas
Aquest exemple de codi mostra una tècnica en el desenvolupament web: dibuixar el frame actual d'u...
Exemple: webcam on canvas
Aquest exemple utilitza l'API MediaDevices per accedir a la càmera web de l'usuari i, a continuac...
Descarregar un canvas
Per desar una imatge d'un canvas com a descàrrega local, el mètode més utilitzat és crear un enll...