setTransform,spostare,scalare,ruotare,distorgere - live
Se riesci a leggere questo, il tuo browser non supporta Canvas.
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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>$(document).ready(function() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");
// 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>
<canvas id="canvas" width="200" height="200"></canvas>
<div>
<span id="SpostaX"></span>:<br />
<input class="ST" name="SpostaX" min="50" max="150" type="range">
<br />
<span id="SpostaY"></span>:<br />
<input class="ST" name="SpostaY" min="50" max="150" type="range">
<br />
<span id="ScalaX"></span>:<br />
<input class="ST" name="ScalaX" min="0.5" max="1.5" step="0.1" type="range">
<br />
<span id="ScalaY"></span>:<br />
<input class="ST" name="ScalaY" min="0.5" max="1.5" step="0.1" type="range">
<br />
<span id="Ruota"></span>:<br />
<input class="ST" name="Ruota" min="-45" max="45" type="range">
<br />
<span id="DistorgeX"></span>:<br />
<input class="ST" name="DistorgeX" min="-45" max="45" type="range">
<br />
<span id="DistorgeY"></span>:<br />
<input class="ST" name="DistorgeY" min="-45" max="45" type="range">
</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.