Search Results

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...

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...

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...

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 ...

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...

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...

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...

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...

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...

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 ...

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è...

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...

Aquest codi combina tres transformacions clau per aconseguir un efecte visual concret: l'efecte de reflex o mirall a l'aigua. El codi realitza dues accions de dibuix de text: una per al text normal i una altra per al seu reflex. L'efecte de reflex es basa en l...

Dibuixar un rellotge amb Canvas és ideal perquè no cal calcular les coordenades X i Y de la punta de cada agulla. Simplement movem l'origen al centre del rellotge i girem el Canvas abans de dibuixar cada agulla. Aquest codi dibuixa un rellotge analògic senzill...

Ombrejat (Shadows) Les propietats d'ombra del Canvas afecten qualsevol operació de dibuix posterior (fillRect, stroke, fillText, etc.). Són útils per donar un efecte tridimensional o soft. Propietat Funció Notes ctx.shadowColor Color de l...

Les transformacions translate(), rotate(), i scale() són el fonament de qualsevol dibuix complex i animació al Canvas. La seva importància cabdal resideix en el fet que manipulen el sistema de coordenades del Canvas (la graella on dibuixem) i no els objectes i...

L'ús de patrons (patterns) amb ctx.createPattern() és una tècnica avançada que permet omplir o traçar formes amb textures complexes o repetitives, superant la limitació dels colors plans i els degradats. Un Patró és, essencialment, una imatge que es repeteix ...