Pàgines actualitzades recentment
Estructura bàsica MVC
Aquí tens l'esquema de l'estructura de directoris i arxius del projecte MVC, tal com es desprèn d...
Front controller: index.php
L'arxiu index.php faria d'entrada a l'aplicació i serà l'encarregat de carregar els arxius necess...
Exemple: Un text amb reflex
Aquest codi combina tres transformacions clau per aconseguir un efecte visual concret: l'efecte d...
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...