canvas Archives - Appunti e tutorial su front-end web technology

Creare contenuti interattivi con SVG e Javascript direttamente online con Janvas

May 102013

Janvas è un’applicazione che permette di disegnare grafica vettoriale, creare siti web e sviluppare applicazioni con l’editor Javascript, CSS integrato.

I files creati vengono memorizzati su Google Drive rendendo questa applicazione accessibile da qualunque luogo.

Janvas è ideale per lo sviluppo di progetti in team, infatti, grazie alle possibilità offerte da Google Drive, ogni progetto (o parte di esso) può essere facilmente condiviso con altri.

Offre molte possibilità di utilizzo sia nell’ambito della scuola e dell’insegnamento che in ambito lavorativo.

Ci sono diversi esempi sul sito che mostrano la flessibilità e le potenzialità di Janvas.

www.janvas.com

jQuery e Canvas

HTML5, JQuery No Responses »

Apr 082013

Oggi proveremo a disegnare sul canvas di html5 con jQuery. Sarà un semplice esempio per iniziare a vedere cosa succede.

Nella pagina mettiamo un canvas, giusto con un bordino csse poi ci concentreremo sugli eventi legati al mouse.

Abbiamo bisgon di riferirci al canvas e impostare una variabile booleana draw a false:

var context = $('#target')[0].getContext('2d');

var draw = false;

Poi ci interessano 4 eventi legati al mouse, due posizioneranno la variabile draw a false (mouseup, mouseout) e uno a true (mousedown).

Quindi se abbiamo premuto e siamo dentro al canvas con mousemove disegniamo prendendo le coordinate del punto in cui sitrova il mouse per tracciare la linea.

$('#target')
.mousedown(function() {
draw = true;
})
.mouseup(function() {
draw = false;
})
.mouseout (function() {
draw = false;
})
.mousemove(function(event) {
var pos = $(this).position();
if(draw){
context.fillRect(event.pageX - pos.left, event.pageY - pos.top, 2, 2);
}
});

L’esempio

HTML5 canvas: animazione controllata da form

HTML5 No Responses »

Mar 072013

Seguendo il percorso iniziato con easel.js proviamo ad animare due oggetti in un canvas, uno avrà un FPS governato da una select, l’altro sarà sempre costante.

Quindi partendo dal solito html, aggiungiamo una funzione javascript che crea due oggetti timeCircle e tickCircle e poi procediamo con la solita animazione:

function init() {
stage = new createjs.Stage("myCanvas");

timeCircle = new createjs.Shape();
timeCircle.graphics.beginFill("red").drawCircle(0, 0, 40);
timeCircle.y = 50;
stage.addChild(timeCircle);

tickCircle = new createjs.Shape();
tickCircle.graphics.beginFill("blue").drawCircle(0, 0, 40);
tickCircle.y = 150;
stage.addChild(tickCircle);

createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(20);
}

Le varibili stage, timeCircle, tickCircle, dovranno esser globali.

A questo punto inseriamo nell’html la select per regolare la velocità del primo cerchio:

<select onchange="createjs.Ticker.setFPS(Number(this.value));">
<option value="10">10 fps</option>
<option value="20" selected>20 fps</option>
<option value="30">30 fps</option>
<option value="40">40 fps</option>
<option value="50">50 fps</option>
<option value="60">60 fps</option>
</select>

All’onchange modifichiamo il FPS. Resta da definire la funzione tick:


function tick(event) {
// time based
timeCircle.x = timeCircle.x + (event.delta)/1000*100;
if (timeCircle.x > stage.canvas.width) { timeCircle.x = 0; }

// not time based:
tickCircle.x = tickCircle.x + 5; // 100 / 20 = 5
if (tickCircle.x > stage.canvas.width) { tickCircle.x = 0; }

stage.update();
}

Dove il secondo è sempre costante, mentre la velocità del primo è calcolata a partire dal valore passato dalla select (o dalla chiamata iniziale)

Ecco l’esempio

HTML5 canvas: una semplice animazione

HTML5 No Responses »

Mar 052013

Partendo dal post precedente proveremo ad animare il cerchio rosso.

A livello di html non cambia nulla, solo creeremo un canvas 500×100, sarà sufficiente.

La variazione principale consisterà nell’introduzione di questa funzione (banale):


function tick() {
circle.x = circle.x + 5;
if (circle.x > stage.canvas.width) { circle.x = 0; }
stage.update();
}

che serve per spostare il centro del cerchio di 5px dando lil movimento, ovviamente alla fine dello stage riparte dall’inizio.

Notare e non dimenticare l’update dello stage

Ma la cosa interessante è come si attiva questa funzione, ovvero queste due righe di codice:


createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(30);

Il Ticker da una trasmissione a intervalli regolari e viene inviata una chiamata alla funzione tick, ad ogni “tick”.

L’ultima opzione consente di impostare la frequenza dei fotogrammi in fotogrammi al secondo (FPS). Ad esempio, con un intervallo di 40, getFPS () restituisce 25 (1000ms al secondo diviso per 40 ms per ogni tick = 25fps).

L’esempio

HTML5 Canavs con easeljs

HTML5 No Responses »

Mar 032013

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

Canvas: un disegno manipolato da un form

HTML5 No Responses »

Dec 132011

Questo post nasce da una esigenza che ho avuto: un semplice disegno che reagisse a delle modifiche di valori tramite delle select di un form. La soluzione, per vari motivi, non poteva essere flash e quindi mi sono orientato a usare l’ogetto canvas di html5. La compatibilità con i vari ie è garantita dalla libreria excanvas.js

Quindi ho creato le mie tre select che raffigurano una linea vertivale, una linea obliqua e l’angolo; l’html della pagina è completato dal nostro canvas.

Al caricamento della pagina, via jquery, associo l’onchange delle select con la modifica al disegno mediante la chiamata alla funzone disegna.

La funzione disegna, innanzitutto si predispone e “aggancia” il canvas pronto per il disegno 2D:


var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”);

La parte successiva è un po’ noiosa e consiste nella lettura del form e nel calcolo dei valori necessari al nostro disegno: difatti il canvas è un piano cartesiano e per disgnare delle lineee con punto di partenza e di arrivo bisogn far ricorso a un po’ di trigonometria. Ma la parte che più interessa è quella del disegno vero e prorpio:


context.beginPath();
context.moveTo(290, hfinestra);
context.lineTo(290, 45);

Mi posiziono in un punto fisso sull’asse delle x e la cui altezza è determinata dalla select della linea verticale e traccio una riga fino a un punto fisso di congiunzione delle due righe


context.lineTo(coseno, seno);
context.lineWidth = 10;
context.strokeStyle = “black”;

La seconda linea va da dove sono arrivato fino al puntodeterminato dal coseno e al seno calcolati in base all’angolo e alla lunghezza della linea verticale. Setto spessore e colore della linea, infine la disegno:


context.stroke();

La pagina contiene anche un pulsante che chiama una funzione per pulire

L’esempio completo