necesito: Crear un archivo html con su correspondiente archivo css en el que se visualice una imagen al 30% de su tamaño y escribe el código necesario para que cuando el situemos el ratón sobre ella, se dibuje dicha imagen en el canvas con sus dimensiones originales y que cuando salgamos de su superficie se borre. Además, añade un texto con un fondo redondeado y sombras mediante CSS3. Puedes darle el estilo que quieras a todos los elementos. Después comprueba el resultado en un navegador compatible con HTML5.
de momento tengo esto:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<title>Ejercicio 5 Canvas</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="MyStyles.css">
<!-- empieza el script -->
</head>
<body>
<script language="javascript">
function cargaContextoCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if(elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if(contexto){
return contexto;
}
}
return FALSE;
}
function cargaContextoCanvas(idCanvas2){
var elemento = document.getElementById(idCanvas2);
if(elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if(contexto){
return contexto;
}
}
return FALSE;
}
function cargarcanvas () {
}
window.onload = function(){
//Recibimos el elemento canvas
var ctx = cargaContextoCanvas('micanvas');
if(ctx){
//Creo una imagen conun objeto Image de Javascript
var img = new Image();
//indico la URL de la imagen
img.src = 'imagen.jpg';
//defino el evento onload del objeto imagen
img.onload = function(){
//incluyo la imagen en el canvas
ctx.drawImage(img, 75, 5, 200, 137);
ctx.drawImage(img, 325, 5, 650, 406);
}
}
}
</script>
<a class="boton" href="#" title="ejercicio 5">Ejercicio 5</a>
<h1><canvas id="micanvas" width="1000" height="900">
Tu navegador no soporta canvas.
</canvas></h1>
</body>
</html>
no soy capaz de que funcione el mouseover ya que no se donde lo tengo que poner.
muchas gracias por la ayuda anticipada.
gracias
