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>
-----------------------------------------------
Iscriviti a:
Commenti sul post (Atom)
Physics informed neural network Fukuzono
Visto che puro ML non funziona per le serie tempo di cui mi sto occupando ed le regressioni basate su formule analitiche mostrano dei limiti...
-
In questo post viene indicato come creare uno scatterplot dinamico basato da dati ripresi da un file csv (nel dettaglio il file csv e' c... -
La scheda ESP32-2432S028R monta un Esp Dev Module con uno schermo TFT a driver ILI9341 di 320x240 pixels 16 bit colore.Il sito di riferiment... -
Questo post e' a seguito di quanto gia' visto nella precedente prova Lo scopo e' sempre il solito: creare un sistema che permet...
Nessun commento:
Posta un commento