<style>
html, body {height: 200%; width: 100%;} #micanvas {border: 3px solid gray;}
#micanvas:hover
{border: 3px solid red; transform: translate();
width: 100px;
height: 150px;
}
</style>
</head>
<body>
<canvas id="mican" width="1000" height="625" style="position: absolute; top:1%; left:1%; border: 3px solid red;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c = document.getElementById("mican");var cxt = c.getContext("2d");
// Escribimos - Titulo
cxt.font="bold 20px arial";
cxt.fillText("*** Peeling o efecto de la esquina doblada ***",270, 25);
// Dibujamos - triangulo esquina doblada
cxt.beginPath();
cxt.fillStyle="";
cxt.moveTo(0, 500);
cxt.lineTo(220, 625);
cxt.lineTo(0, 625);
cxt.closePath();
cxt.stroke();
cxt.fill();
// Dibujamos - quadraticas
cxt.beginPath();
cxt.moveTo(0, 500);
cxt.quadraticCurveTo(10, 515, 160, 500);
cxt.quadraticCurveTo(175, 570, 220, 625);
cxt.moveTo(220, 625);
cxt.lineTo(0, 500);
cxt.stroke();
cxt.fillStyle = "gold";
cxt.fill()
// Escribimos - Creditos
cxt.fillStyle = "black";
cxt.font="bold 20px arial";
cxt.fillText("Rick 1956",890, 600);</script>
<!-- Defino un segundo lienzo, iguales caracteristicas en tamaño , defino el id diferente -->
<canvas id="micanvas" width="1000" height="625" style="position: absolute; top:1%; left:1%; border: 3px solid red;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c = document.getElementById("micanvas");var cxt = c.getContext("2d");
// Escribimos - Titulo
cxt.font="bold 20px arial";
cxt.fillText("*** Peeling o efecto de la esquina doblada ***",270, 25);
// Dibujamos - triangulo esquina doblada
cxt.beginPath();
cxt.fillStyle="";
cxt.moveTo(0, 500);
cxt.lineTo(220, 625);
cxt.lineTo(0, 625);
cxt.closePath();
cxt.stroke();
cxt.fill();
// Dibujamos - quadraticas
cxt.beginPath();
cxt.moveTo(0, 500);
cxt.quadraticCurveTo(10, 515, 160, 500);
cxt.quadraticCurveTo(175, 570, 220, 625);
cxt.moveTo(220, 625);
cxt.lineTo(0, 500);
cxt.stroke();
cxt.fillStyle = "blue";
cxt.fill()
// Escribimos - Creditos
cxt.fillStyle = "black";
cxt.font="bold 20px arial";
cxt.fillText("Rick 1956",890, 600);</script>
</body>
</html>
<!-- Meter el mismo dibujo en ambos lienzos, al pasar el raton en el lienzo superior, el por efecto del hover, este se reduce, y se inicia en una esquina, debajo se muestra el dibujo original, dando el efecto buscado de la miniatura,
e inclusive, cambias algunos colores, como en tu ejemplo.
No tengo idea de como se hace esto con ayuda de javascript, pero estas maromas son las que ponen a pensar la mente
y dar respuestas, con lo que tienes y conoces de momento....
-->
Crear cuenta
