Cerca avançada
Resultats de la cerca
S’han trobat 505 coincidències
PWA Hello world
Una Progressive Web App (PWA) o Aplicació Web Progressiva. És una pàgina web normal (HTML, CSS, JS) que, gràcies a dues eines addicionals (un "manifest" i un "service worker"), pot ser "instal·lada" al dispositiu de l'usuari (ordinador o mòbil) gairebé com una...
Configuració inicial canvas
La configuració inicial per fer servir HTML Canvas és bastant directa, necessites dues coses: Una etiqueta <canvas> a l'HTML per crear l'"espai de dibuix". Un script JavaScript per "agafar" aquest espai i començar a dibuixar-hi. HTML inde...
Dibuix 2D
La part més important per entendre com dibuixar, si el <canvas> és el llenç, el context és la combinació del pinzell, la paleta de colors i la mà. Pensa-ho així: HTML <canvas>: És només un contenidor buit. És un llenç en blanc clavat en un marc. No sap...
El sistema de coordenades
Entendre el sistema de coordenades és el pilar fonamental per dibuixar qualsevol cosa al <canvas> de JavaScript. Imagina el teu element <canvas> com un full de paper quadriculat digital. Cada punt d'aquest full té una adreça única, definida per dos valors: una...
Exemple: Visualitzador de coordenades a canvas
Aquest exemple és un excel·lent punt de partida per a entendre el sistema de coordenades del ratolí. Aquest exemple realitza el següent: Dibuixar un punt central al canvas per a referència visual. Utilitzar el propi canvas per mostrar les coordenad...
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 Canvas. Les operacions de rectangle són, de fet, les úniques que tenen mètodes integrats dedicats al context de dibuix 2D. Tots els mètodes de rectangle requereixen d...
Colors i transparències fillStyle i strokeStyle
Assolir els conceptes de fillStyle i strokeStyle és fonamental, ja que controlen l'aparença de tot el que dibuixis al Canvas. Són, essencialment, la paleta de colors i pinzells del teu context de dibuix. ctx.fillStyle (Estil d'ompliment) Aquesta propietat de...
Linies i paths en canvas
Aprofundirem en el concepte de "Path" (camí o traçat), que és la columna vertebral del dibuix de línies i de totes les formes complexes al Canvas. Dibuixar línies al Canvas de JavaScript no és una acció única, sinó una seqüència de tres passos: Inici, Definici...
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òlida, tancada i omplerta. ctx.closePath() (Tancar camí) Què és i com funciona? El mètode closePath() és una ordre que s'utilitza dins d'un traçat (beginPath). L...
Arcs i cercles
El dibuix de cercles i arcs es beneficia enormement d'una millor visualització de l'ús dels angles i els mètodes relacionats. Aprofundirem en el funcionament del mètode arc() i l'angle zero al Canvas, afegirem un exemple de cercle complet, un segment (gràfica ...
Exemple: Rentangle arrodonit amb arcTo
Un dels usos més pràctics i il·lustratius de ctx.arcTo() és, precisament, crear un rectangle amb les cantonades arrodonides de manera programàtica. Això requereix utilitzar arcTo() quatre vegades, una per a cada cantonada, seguint un patró lògic. La lògica de...
Exemple: Un oval
Aquest exemple és excel·lent per introduir la transformació de scale(), ja que mostra la complexitat de mantenir les coordenades correctament. De fet, l'ús de scale() per dibuixar un oval és una tècnica molt comuna. La funció scale(), te un impacte en les coo...
Exemple: Les el·lipses
El mètode ctx.ellipse() és la manera moderna i preferida per dibuixar òvals i el·lipses al Canvas, ja que és molt més intuïtiu que fer servir la funció scale() anterior. El·lipses amb ctx.ellipse() El mètode ctx.ellipse() va ser estandarditzat més tard que a...
Línies discontinues
Una manera molt enginyosa de fer línies discontínues és utilitzant un bucle for i crides repetides a moveTo() i lineTo(). Aquesta tècnica funciona, però és manual. <canvas id="juntas" width="250" height="240">Su navegador no soporta canvas Trist </canvas> <s...
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 una "marxa de formigues" o una barra de progrés animada. L'animació no es fa amb CSS, sinó amb JavaScript, actualitzant el valor de lineDashOffset en cada fotogra...
Text dins canvas
El Canvas ofereix un control excel·lent sobre l'aparença i, especialment, la posició exacta del text, cosa que sovint és més precisa que el CSS tradicional. Aprofundirem en les propietats clau, especialment en la complexitat de textBaseline. Dibuixar text al ...
Aprofundiment en ctx.measureText(text)
ctx.measureText() ens permet adaptar dinàmicament la mida del text a un contenidor. Aquesta és la seva funció més important. El mètode ctx.measureText(text) és la funció de pre-càlcul del Canvas. És l'eina que permet fer maquetació abans de fer el dibuix. Què...
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 disponible per implementar l'ajust de text automàtic (word wrapping), ja que Canvas no ho fa per defecte. L'exemple il·lustra perfectament l'algorisme necessari. A co...