mercoledì 13 febbraio 2013

Rotazione di immagine in HTML5

Di seguito in questo post viene descritto come e' possibile ruotare una immagine contenuta in un Canvas attorno al suo centro in HTML5
(il codice e' stato adattato da esempi che si trovano su forum)


-----------------------------------------------

<body onload="drawCanvas();">
    <div>
        <canvas id="myCanvas" width="256" height="256">
            <p>Your browser doesn't support canvas.</p>
        </canvas>
    </div>
</body>

 <script type="text/javascript">
var surface;
var happy;
var angle = 0;

 function drawCanvas() {
    surface = document.getElementById("myCanvas");

     if (surface.getContext) {
        android = new Image();
        android.onload = loadingComplete;
        android.src = "./android.jpg";
    }
}

 function loadingComplete(e) {
    var surfaceContext = surface.getContext('2d');
    surfaceContext.fillStyle = "rgb(255,255,255)";
    surfaceContext.fillRect(0, 0, surface.width, surface.height);
    surfaceContext.save();
    surfaceContext.translate(android.width * 0.5, android.height * 0.5);
    surfaceContext.rotate(45* 0.0174532925199432957); //45 e' l'angolo di rotazione
    surfaceContext.translate(-android.width * 0.5, -android.height * 0.5);
    surfaceContext.drawImage(android, 0, 0);
    surfaceContext.restore();
}

 </script>

-----------------------------------------------
-
Etichette:

Nessun commento:

Posta un commento

Iscriviti a: Commenti sul post (Atom)

Eth0 su LuckFox Pico Mini A

 Le schede Luckfox Pico Mini A (a differenza delle sorelle maggiori) non hanno un connettore RJ45 e nonostante i pin da saldare non sembrano...