In questo post proveremo a lavorare con il canavs usando una libreria apposita: easel.js
La prima operazione sarà disegnare un semplice cerchio all’interno del canvas, lo scopo di questa libreria, ma di tutte le sue sorelle, è quello di rendere meno gravosa la programmazione tramite le API native di html5.
Tanto per cominciare partiremo con un semplicissimo html che conterrà, indovinate un po’, un canvas:
<body onLoad="init();"> <canvas id="myCanvas" width="500" height="300"></canvas> </body>
Già si vede che all’onload del body verrà chiamata la funzione che disegnerà e quindi passiamo al javascript,
come prima cosa colleghiamo la libreria:
<script src="js/easeljs-0.6.0.min.js"></script>
e quindi procediamo con lo script. Come prima cosa creiamo il nostro stage legandolo al canvas
e in seguito creiamo il nostro cerchio
var stage = new createjs.Stage("myCanvas");
var circle = new createjs.Shape();
successivamente usiamo il metodo drawCircle dell’oggetto graphics per disegnare il cerchio dando le coordinate del centro e il raggio,
usando la concatenabilità lo coloriamo di rosso:
circle.graphics.beginFill("#F00").drawCircle(0, 0, 50);
Gli ultimi due passaggi sono aggiungere l’elemento allo stage e aggiornare lo stesso:
stage.addChild(circle); stage.update();
Qui si trova la documentazione della libreria
Mentre questo è l’esempio
Sorry, the comment form is closed at this time.