Ricerca tra la vecchia roba

Canvas tag

Posted: Marzo 16th, 2008 | Author: | Filed under: Programmazione | Commenti disabilitati su Canvas tag

Nei browser di nuova generazione è stato inserito un nuovo tag denominato canvas preposto a fornire delle funzionalità grafiche avanzate tramite l’uso di javascript; è una specifica presente nell HTML5 ed è stata introdotta dalla apple per webkit e poi è stato usato anche nel motore di rendering Gecko usato dal nostro beneamato firefox/mozilla/iceweasel.

Bisogna dire che le funzionalità e l’impostazione ricordano molto il modus operandi delle librerie cairo (usate per il rendering di Gecko): il tutto i basa su un "contesto grafico", proprietà dell’oggetto canvas; all’interno della nostra pagina HTML deve essere presente il tag di cui stiamo discutendo con un id associato (in questo caso ho scelto un serioso "w la fica"), così da poter estrapolare tramite la funzione

var ctx = document.getElementById(‘w la fica’).getContext(‘2d’);

il contesto grafico su cui eseguire le operazioni. L’argomento ‘2d’ sta ad indicare il fatto che nel futuro saranno implementate funzionalità multidimensionali, magari supportando le potenzialità offerte da accelerazioni grafiche e storie alla OpenGL. ctx conterrà sempre lo stato del canvas per quanto riguarda il sistema di riferimento, il colore, etc; è possibile tuttavia salvare in memoria, tramite operazioni simil stack, il contesto grafico per recuperarlo in seguito tramite (rispettivamente) le funzioni

ctx.save();
/*qui ci va un po’ di porcheria grafica*/
ctx.restore();

 Le operazioni eseguibili sono svariate e consistono principalmente di due modalità differenti: il fill e lo stroke; nella prima modalità si riempie con un colore unico o con un pattern scelto, un’area di disegno determinata precedentemente, nel secondo caso invece si disegna una curva lungo il path che delimita la zona. Infatti la modalità di disegno è basata sui path, su delle curve che vengono create attraverso i seguenti metodi

 
void beginPath();
void closePath();
void moveTo(in float x, in float y);
void lineTo(in float x, in float y);
void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);
void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);
void rect(in float x, in float y, in float w, in float h);
void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);

 a queste vanno affiancate ovviamente le operazioni per effettuare effettivamente il fill o lo stroke che sono

		void fill();
	void stroke();
	

senza dimenticare la possibilità di indicare al contesto grafico che si intende usare il path scelto come area di clipping,cioé una zona in cui eseguire esclusivamente le operazioni di disegno, lasciando il resto intatto. Ricordarsi che quando si effettuano lo stroke o il fill, non viene cancellato il path dal contesto a differenza di quello che avviene con le librerie cairo.

È possibile ovviamente impostare anche il modo in cui effettuare le operazioni sopra elencate, cioé per esempio il colore per il fill o per lo stroke tramite

attribute DomObject fillStyle;
attribute DomObject strokeStyle;

la potenza consiste nel fatto che è possibile specificare secondo le direttive del CSS3 anche un canale alpha per queste quantità o addirittura un gradiente lineare/radiale oppure un pattern.

Ultimo ma non per importanza (in realtà ci sono ancora un paio di cose da dire ma è l’1:30 e vorrei farmi una sega prima di andare a dormire) è la questione delle trasformazioni: ogni volta che viene effettuata una operazione riguardante un path, i punti creati vengono trasformati secondo una matrice di rototraslazione che al momento della creazione è uguale all’identità. Sono possibili le operazioni standard

rotate(angle);
translate(dx, dy);
scale(x, y);
transform(m11, m12, m21, m22, dx, dy);
setTransform(m11, m12, m21, m22, dx, dy)
;

questo permette di non dover impazzire per capire dove vanno a finire i punti in seguito ad una rotazione.

Esistono anche delle API sperimentali per la implementazione del testo che tuttavia sono ancora fortemente dipendenti dal browser (infatti su firefox3 hanno il prefisso moz)

mozDrawText()
mozMeasureText()
mozPathText()
moxTextAlongPath()

e devo dire che queste superano in potenzialità le API delle librerie cairo… guardatevi gli esempi nelle pagine linkate sotto…

Prossimamente farcirò il post di esempi di codice, per adesso prendetevi un clone di arkanoid creato tramite quanto detto sopra (l’ho chiamato break in con grande fantasia) che potete assaggiare a questa pagina, oppure se volete fare delle modifiche potete scaricare il codice con git tramite

git clone http://www.autistici.org/packz/Project/break-in.git

e divertirvi a modificarlo (magari mandatemi i vostri improvements)… attenzione che funziona solo con firefox versione 3 a causa delle funzionalità di testo non implementate ancora nel firefox stabile.Ovviamente beccatevi anche un bello screenshoot

 

Screenshoot di break-in, clone di arkanoid.

 

Linkografia


Comments are closed.