{"id":1724,"date":"2010-05-13T14:50:53","date_gmt":"2010-05-13T12:50:53","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=1724"},"modified":"2023-02-27T14:58:35","modified_gmt":"2023-02-27T14:58:35","slug":"html5-canvas-stile-e-colori","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/sviluppo\/html5-canvas-stile-e-colori\/","title":{"rendered":"HTML5 Canvas: stile e colori"},"content":{"rendered":"

\"HTML5<\/a>Nei miei post precedenti riguardanti HTML5<\/a> ho usato alcune istruzioni per manipolare i colori delle forme geometriche e degli elementi creati nel Canvas<\/strong>. Oggi vedremo di approfondire la gestione dello stile di ci\u00f2 che componiamo nel Canvas per ottenere elementi graficamente pi\u00f9 gradevoli.<\/p>\n

I colori<\/h3>\n

Per definire un colore dedicato ad alcune forme disegnate nel Canvas, Javascript ci mette a disposizione 2 funzioni:<\/p>\n

[javascript]
\nfillStyle = colore; \/\/ "#FF0000", oppure "red", oppure "rgb(255,0,0)"
\nstrokeStyle = colore; \/\/ "#FF0000", oppure "red", oppure "rgb(255,0,0)"
\n[\/javascript]<\/p>\n

Mentre fillStyle<\/em> serve per impostare il colore di riempimento di una forma disegnata, strokeStyle<\/em> \u00e8 utilizzata per definire il colore del contorno della figura. La variabile che abbiamo denominato colore<\/em> pu\u00f2 essere una stringa contenente il valore esadecimale del colore, un gradiente<\/em> o un pattern<\/em> (come vedremo pi\u00f9 avanti). Il colore di default \u00e8 il nero.<\/p>\n

Esempio 1: utilizzare fillStyle e strokeStyle
\n<\/strong><\/p>\n

Nel primo esempio voglio creare la base di una semplice interfaccia grafica:<\/p>\n

[javascript]
\nfunction draw() {
\n\tvar ctx = document.getElementById(‘canvas’).getContext(‘2d’);
\n\/\/ disegno lo sfondo nero
\n\tctx.fillRect(0,0,800,600);
\n\/\/ imposto il colore e creo la barra superiore che conterr\u00e0 il titolo del programma
\n\tctx.fillStyle = ‘#4e95ec’;
\n\tctx.fillRect(1,1,798,20);
\n\/\/ creo il pulsante rosso per chiudere la finestra del programma
\n\tctx.fillStyle = ‘rgb(227, 76, 28)’;
\n\tctx.fillRect(780,2,18,18);
\n\/\/ creo una finestra grigia con contorno rosso
\n\tctx.fillStyle = ‘grey’;
\n\tctx.strokeStyle = ‘red’;
\n\tctx.fillRect(200,100,320,180);
\n\tctx.strokeRect(199,99,320,180);
\n\/\/ creo la barra dello start del sistema operativo in stile Windows XP
\n\tctx.fillStyle = ‘#3a943a’;
\n\tctx.fillRect(1,570,100,29);
\n\/\/ creo la barra delle applicazioni
\n\tctx.fillStyle = ‘#12abf0’;
\n\tctx.fillRect(101,570,698,29);
\n}
\n[\/javascript]<\/p>\n

Il risultato \u00e8 l’immagine seguente:<\/p>\n

\"Canvas:<\/a><\/p>\n

La trasparenza<\/h3>\n

HTML5 ci da la possibilit\u00e0 di impostare il livello di trasparenza delle figure che creiamo nel nostro Canvas. Per definire il valore di semi-trasparenza ci sono 2 modi:<\/p>\n