Recently Updated Pages
Transformant el sistema de coordenades (translate, rotate, scale)
Les transformacions translate(), rotate(), i scale() són el fonament de qualsevol dibuix complex ...
Ombres i degradats
Ombrejat (Shadows) Les propietats d'ombra del Canvas afecten qualsevol operació de dibuix poster...
Exemple: Rellotge analògic animat
Dibuixar un rellotge amb Canvas és ideal perquè no cal calcular les coordenades X i Y de la punta...
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...
Aprofundiment en ctx.measureText(text)
ctx.measureText() ens permet adaptar dinàmicament la mida del text a un contenidor. Aquesta és la...
Text dins canvas
El Canvas ofereix un control excel·lent sobre l'aparença i, especialment, la posició exacta del t...
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...
Línies discontinues
Una manera molt enginyosa de fer línies discontínues és utilitzant un bucle for i crides repetide...
Exemple: Les el·lipses
El mètode ctx.ellipse() és la manera moderna i preferida per dibuixar òvals i el·lipses al Canvas...
Exemple: Un oval
Aquest exemple és excel·lent per introduir la transformació de scale(), ja que mostra la complexi...
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 ...
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ò...
Linies i paths en canvas
Aprofundirem en el concepte de "Path" (camí o traçat), que és la columna vertebral del dibuix de ...
Colors i transparències fillStyle i strokeStyle
Assolir els conceptes de fillStyle i strokeStyle és fonamental, ja que controlen l'aparença de to...
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...
Exemple: Visualitzador de coordenades a canvas
Aquest exemple és un excel·lent punt de partida per a entendre el sistema de coordenades del rato...
El sistema de coordenades
Entendre el sistema de coordenades és el pilar fonamental per dibuixar qualsevol cosa al <canvas>...
Dibuix 2D
La part més important per entendre com dibuixar, si el <canvas> és el llenç, el context és la com...
Configuració inicial canvas
La configuració inicial per fer servir HTML Canvas és bastant directa, necessites dues coses: ...