29. Dibuix sobre canvas

 

Índex

Introducció

L'HTML 5 introdueix l'etiqueta <canvas>, representativa d'una àrea rectangular de dibuix on, amb el suport del JavaScript, es poden crear dibuixos dinàmicament.

Un dibuix pot ésser format d'un o més elements, cada un dels quals queda identificat per una variable i associat a una àrea de dibuix determinada:

(getContext porta l'especificació 2d a l'espera que en el futur es desenvolupi una opció en tres dimensions).

A partir d'aquest punt, calen quatre accions més:

Nota: L'element canvas només és reconegut pels navegadors més moderns. En el cas de l'Explorer de Microsoft, només es pot fer servir en la versió 9, i en la 8 amb el suport d'un programa de JavaScript anomenat excanvas.js, de distribució lliure. D'altra banda, algunes de les eines de dibuix tenen interpretacions diferents en navegadors diferents.

 

Especificacions de color i de gruix

Per a especificar el color d'un element de dibuix, li atribuïm la propietat fillStyle (per als farciments) o strokeStyle (per a les línies); per exemple,

Si hi ha d'haver transparència, es fa servir rgba(), afegint-hi un quart argument que expressa l'opacitat.

El valor del color també es pot especificar amb qualsevol dels procediments vàlids, tot i que es recomana fer-ho amb rgb() o amb rgba().

En el cas de les línies, se n'especifica el gruix amb lineWidth:

 

Rectangles

Per a representar rectangles hi ha dues funcions:

Amb la primera dibuixem rectangles plens; amb la segona, perímetres rectangulars.

En tots dos casos, les coordenades del rectangle es mesuren en píxels, referits a l'area de dibuix, i s'especifiquen en l'ordre seguent: límit esquerre, límit superior, amplada, alçada.

Exemple

 

Línies rectes i arcs de circumferència

La funció stroke() serveix genèricament per a dibuixar línies. Prèviament cal establir les característiques de la línia, tant les formals (strokeStyle() i lineWidth()) com les que indiquen el recorregut:

Per a la línia recta, cal indicar les coordenades del punt d'inici i les del punt final:

Per als arcs de circumferència es fa servir la funció

Detall dels paràmetres:

Exemple

Hi ha, anàlogament, funcions per a crear corbes de Bézier (bezierCurveTo(a, b, c, d, e, f)) i corbes quadràtiques (quadraticCurveTo(a, b, c, d))

Si es crea una figura tancada, després es pot omplir amb la funció fill().

 

Punts

Un punt és simplement un rectangle o una línia de dimensions molt petites.

Exemple

 

Gradients

Un gradient és una transició suau entre dos colors. La transició té un límit inicial i un límit final. En total doncs queden delimitats tres sectors:

Color A | gradient | Color B

Per a fixar els límits i els colors, es fa servir la funció

El paràmetre límit indica el límit en fraccions d'1; el paràmetre color indica el color present en el límit. El color de qualsevol punt depèn dels dos límits veïns a banda i banda:

El gradient així especificat s'aplica amb la funció

Els quatre paràmetres indiquen l'orientació del gradient. Dissortadament a data d'avui (estiu de 2011) els diversos navegadors els interpreten d'una manera diferent; només tenen una interpretació uniforme les dues formulacions següents:

Exemple

També existeix el CreateRadialGradient(), amb sis paràmetres, però no és reconegut per l'Explorer.

 

Dibuixos compostos

Podem acumular diversos elements en una mateixa àrea de dibuix. El procediment de creació és exactament el mateix que hem vist per als dibuixos individuals. Si les diverses parts del dibuix tenen color, gradient o gruix diferents, cal avantposar a cada conjunt d'instruccions la funció

En canvi, podem, per exemple, estalviar l'ús de beginPath() entre un conjunt de segments rectilinis del mateix color i del mateix gruix.

L'ordre d'aplicació de les diverses parts del dibuix és rellevant: cal imaginar que cada element del dibuix és contingut en una làmina transparent i que aquestes se superposen per ordre; per tant un element posterior taparà l'anterior en la zona on coincideixin.

Exemple

 

Esborrar

Podem esborrar una zona rectangular d'un dibuix previ amb la funció clearRect(), que funciona exactament igual que fillRect().

La combinació de qualsevol funció de dibuix i de clearRect() (utilitzades conjuntament o en dues etapes) permet l'elaboració de dibuixos més complexos.

Exemple

Nota: La funció clearRect() no és reconeguda per les versions 7 i 8 de l'Explorer, encara que s'hi afegeixi el programa excanvas.js.

 

Dibuixos dependents d'una funció

Els paràmetres de les funcions de dibuix poden ésser representats per variables, i aquestes poden dependre de l'aplicació reiterada d'una fórmula matemàtica, inclosa, per exemple, en una estructura for.

Exemple