Mirror orizzontale e verticale
mirrorOriz: esegui |
|
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Riflesso Orizzontale di un'Immagine su Canvas</title> 7 </head> 8 <body> 9 <p margin 0><image src="img/occhi.jpg"></image></p> 10 <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas> 11 12 <script> 13 // Ottieni il contesto di disegno 2D 14 const canvas = document.getElementById('myCanvas'); 15 const ctx = canvas.getContext('2d'); 16 17 // Carica l'immagine 18 const img = new Image(); 19 img.src = 'img/occhi.jpg'; 20 21 img.onload = function() { 22 23 // Trasformazione: scala negativa sull'asse x per riflettere orizzontalmente 24 ctx.scale(-1, 1); 25 26 // Traslazione per mantenere l'immagine visibile dopo la riflessione 27 ctx.translate(-img.width, 0); 28 29 // Disegna l'immagine riflessa 30 ctx.drawImage(img, 0, 0); 31 }; 32 </script> 33 </body> 34 </html> |
mirrorVert: esegui |
|
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Riflesso Verticale di un'Immagine su Canvas</title> 7 </head> 8 <body> 9 <p margin 0><image src="img/occhi.jpg"></image></p> 10 <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas> 11 12 <script> 13 // Ottieni il contesto di disegno 2D 14 const canvas = document.getElementById('myCanvas'); 15 const ctx = canvas.getContext('2d'); 16 17 // Carica l'immagine 18 const img = new Image(); 19 img.src = 'img/occhi.jpg'; // Sostituisci con il percorso della tua immagine 20 21 img.onload = function() { 22 // Trasformazione: scala negativa sull'asse y per riflettere verticalmente 23 ctx.scale(1, -1); 24 25 // Traslazione per mantenere l'immagine visibile dopo la riflessione 26 ctx.translate(0, -img.height); 27 28 // Disegna l'immagine riflessa 29 ctx.drawImage(img, 0, 0); 30 }; 31 </script> 32 </body> 33 </html> |