Utilizzo cookies

HTML5 canvas in tempo reale

setTransform,spostare,scalare,ruotare,distorgere - live

Muovere gli indicatori per cambiare dimensioni e posizioen della figura..

SpostaX:100:
SpostaY:100:
ScalaX:1:
ScalaY:1:
Ruota:0:
DistorgeX:0:
DistorgeY:0:

LISTATO DELLA PAGINA WEB

<!DOCTYPE html>

<html>

<head>

<title>setTransform,spostare,scalare,ruotare,distorgere - live</title>

// valori di defauilt

var Contatore=0;

var SpostaX=100;

var SpostaY=100;

var ScalaX=1;

var ScalaY=1;

var Ruota=0;

var DistorgeX=0;

var DistorgeY=0;

DisegnaSuCanvas();// valori di default

$(".ST").change(function(){ // nuovi valori per spostamento degli indicatori

SpostaX = parseFloat($('[name="SpostaX"]').val());

SpostaY = parseFloat($('[name="SpostaY"]').val());

ScalaX = parseFloat($('[name="ScalaX"]').val());

ScalaY = parseFloat($('[name="ScalaY"]').val());

Ruota = parseFloat($('[name="Ruota"]').val());

DistorgeX = parseFloat($('[name="DistorgeX"]').val());

DistorgeY = parseFloat($('[name="DistorgeY"]').val());

DisegnaSuCanvas();
});

function DisegnaSuCanvas(){

ctx.setTransform(1,0,0,1,0,0);

ctx.fillStyle="#CCC";
ctx.fillRect(0,0,400,300);// colora sfondo canvas

Contatore++;
var AngoloX = Ruota + DistorgeY;
var AngoloY = Ruota + DistorgeX;
var sx = ScalaX + 1 - Math.cos(Math.PI * Math.abs(DistorgeY) / 180);
var sy = ScalaY + 1 - Math.cos(Math.PI * Math.abs(DistorgeX) / 180);
var rx = Math.PI * AngoloX / 180;
var ry = Math.PI * AngoloY / 180;
ctx.setTransform(sx * Math.cos(rx),
sx * Math.sin(rx),
-sy * Math.sin(ry),
sy * Math.cos(ry),
SpostaX,
SpostaY);
ctx.strokeRect(-50,-50,100,100);

// risultati a video

$("#SpostaX").html("SpostaX:" + SpostaX);

$("#SpostaY").html("SpostaY:" + SpostaY);

$("#ScalaX").html("ScalaX:" + ScalaX);

$("#ScalaY").html("ScalaY:" + ScalaY);

$("#Ruota").html("Ruota:" + Ruota);

$("#DistorgeX").html("DistorgeX:" + DistorgeX);

$("#DistorgeY").html("DistorgeY:" + DistorgeY);

}
});
</script>

</head>

<body>

<div>

<br />

<br />

<br />

<br />

<br />

<br />

</div>

</body>

</html>

Questo e-book è un e-book interattivo, ciò significa che il lettore può inserire dei dati nelle pagine ed il contenuto di queste si adeguerà ai nuovi valori. Per inserire i dati, nelle pagine dell’e-book, sono stati implementati dei controlli simili a quelli che si possono trovare sulle pagine Internet ed un pulsante esegui per impartire il comando di adeguare il contenuto della pagina ai nuovi valori.

Antonella Brandi
Art-designer