Canvas e html5 con strokeStyle e lineWidth

Adesso che abbiamo visto come disegnare una linea in html5 con un tag canvas, possiamo tramite le proprietà strokeStyle e lineWidth dare alla linea un maggiore spessore e un colore diverso dal solito nero.

Come negli esempi precedenti impostiamo il tag canvas e aggiungiamo ai metodi per il disegno della linea anche le proprietà che sono strokeStyle per il colore e lineWidth per lo spessore.

Vediamo cosa otteniamo aggiungendo le proprietà allo script precedente. Troveremo, inoltre, il link per il download in fondo alla pagina.

Esempio:

<!DOCTYPE HTML>
<html>
 <head><title>Colore e spessore alla linea</title>
 </head>
<body>
 <canvas id="linea" width="600" height="300" style="border-style:solid;border-width:1px;border-color:#996600;">
 </canvas>
 <script type=text/javascript>

 var retta = document.getElementById("linea");
 var sottile = retta.getContext("2d");

 sottile.moveTo(150, 250);
 sottile.lineTo(300, 280);
 sottile.strokeStyle="#52429a";
 sottile.lineWidth=15;
 sottile.stroke();

 </script>
  </body>
</html>

Come possiamo vedere integrando lo script degli esempi precedenti abbiamo l’uso di due proprietà che sono strokeStyle per impostare il colore e lineWidth per impostare lo spessore delle linee.

Con strokeStyle abbiamo un codice esadecimale per impostare con precisione il colore, mentre lineWidth indica lo spessore in pixel della linea tracciata.

Da ricordare che la variabile retta richiama il nome id impostato nel tag canvas e la variabile sottile per richiamare le librerie per la visualizzazione delle immagini in 2d.

Nel canvas sono impostati i parametri che indicano le dimensioni dello spazio disponibile per disegnare, inoltre, tramite i fogli di stile (css) possiamo visualizzare un bordo che faccia da cornice al perimetro del canvas in modo da mostrare dove sono posti i suoi confini.

In questo caso sarà sufficiente impostate all’interno del canvas il seguente comando style="border-style:solid;border-width:1px;border-color:#996600;". In questo modo diremo al browser di visualizzare un bordo di tipo solido (una linea continua), dallo spessore di un pixel e dal colore marroncino.

Nel prossimo articolo inizieremo a vedere come disegnare un arco. Non mancare a questo appuntamento.

Per scaricare il file esempio in html clicca su uno dei pulsanti per la condivisione per visualizzare il link per il download.

download linea colorata
Link a questo articolo!Canvas e html5 con strokeStyle e lineWidth" readonly="readonly" type="text" style="width: 100%;" onclick="javascript:this.select()" /> Category: Canvas e html5