Pàgines actualitzades recentment
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: ...
PWA Hello world
Una Progressive Web App (PWA) o Aplicació Web Progressiva. És una pàgina web normal (HTML, CSS, J...
Els mètodes statics
Els mètodes estàtics (static) són funcions que pertanyen directament a la classe (al "plànol"), i...
contructor
El constructor() és un mètode especial i fonamental dins d'una classe de JavaScript. Pensa-hi com...
setInterval, clearInterval
setInterval és l'altre temporitzador principal de JavaScript i funciona de manera molt similar a ...