Imágenes de canvas y evento Click

Actualmente tengo dos círculos en una etiqueta con HTML5 y JavaScript.

Ahora estoy tratando de agregar una imagen (hecho) que cambia según el mouse-over y haga clic.

Es básicamente una implementación de un botón de reproducción / pausa con un cambio de color adicional cuando el usuario pasa el botón por encima del botón.

Parece que no puedo entender cómo funcionan los eventos en las formas en HTML5 ya que no son objetos … Aquí está mi código en este momento:

 window.onload = function() { var canvas = document.getElementsByTagName('canvas')[0]; var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; //Outer circle context.beginPath(); context.arc(centerX, centerY, 150, 0, Math.PI * 2, false); context.fillStyle = "#000"; context.fill(); context.stroke(); //Inner cicle context.beginPath(); context.arc(centerX, centerY, 75, 0, Math.PI * 2, false); context.fillStyle = "#fff"; context.fill(); context.stroke(); //Play / Pause button var imagePlay = new Image(); var imageHeight = 48/2; imagePlay.onload = function() { context.drawImage(imagePlay, centerX - imageHeight, centerY - imageHeight); }; imagePlay.src = "images/play.gif"; } 

1) ¿Cómo manejar eventos en formas creadas con ?

2) ¿Cómo limpiar / eliminar imágenes en las cuando se reemplaza con otra?

Gracias por adelantado !

Técnicamente no hay forma de registrar eventos del mouse en formas dibujadas en canvas. Sin embargo, si utiliza una biblioteca, como Raphael (http://raphaeljs.com/), puede hacer un seguimiento de las posiciones de las formas y, por lo tanto, averiguar qué forma está recibiendo el evento del mouse. Aquí hay un ejemplo:

 var circle = r.circle(50, 50, 40); circle.attr({fill: "red"}); circle.mouseover(function (event) { this.attr({fill: "red"}); }); 

Como puedes ver, es muy simple de esta manera. Para modificar formas, esta biblioteca también será útil. Sin él, deberías recordar cómo volver a dibujar todo cada vez que haces un cambio.

Bueno, la respuesta simple es que no puedes. Tendrá que encontrar las coordenadas del evento de clic y calcular si desea realizar una opción o no, o puede usar tags de área y mapa y superponer el elemento del canvas. Para cambiar un canvas, use la función clearRect para dibujar, dibujar un rectángulo sobre todo y luego volver a dibujar lo que desee.

  1. No hay una forma “integrada” de realizar un seguimiento de las formas dibujadas en el canvas. No se tratan como objetos, sino más bien como píxeles en un área. Si desea manejar eventos en formas dibujadas en el canvas, deberá realizar un seguimiento del área que cubre cada forma y luego determinar para qué forma está activando el evento según la posición del mouse.

  2. Solo puedes dibujar sobre otras formas si quieres reemplazarlo con algo. Es posible que desee echar un vistazo a globalCompositeOperation .

Si desea tratar sus dibujos como objetos, recomendaría usar SVG en lugar de canvas.

Otra opción es usar botones , y luego aplicarles un estilo usando CSS.

Básicamente, lo que estás haciendo ahora realmente no fue el propósito o uso previsto del canvas. Es como usar un lápiz para clavar las uñas: estás usando la herramienta incorrecta para el trabajo.

Si bien es cierto que no puede crear eventos de clic para los objetos dibujados en el canvas, hay una solución: envuelva el canvas en una etiqueta DIV y luego agregue las imágenes dentro de la etiqueta DIV sobre la etiqueta CANVAS.

 

Luego use CSS para hacer que las imágenes coloquen la posición: absoluta y use la izquierda: * px y top: * px para colocar la imagen sobre el canvas donde normalmente la habría dibujado.

 #img1{ position:absolute; left: 10px; top: 10px; } 

Luego, puede agregar eventos de clic a la imagen que se coloca sobre el canvas dando la impresión de que está haciendo clic en el canvas (el ejemplo de abajo usa la función jQuery click ())

 $( "#img1" ).click(function(){ alert("Thanks for clicking me"); }); 

Puede lanzar un rayo en el canvas y probar manualmente sus imágenes para detectar la intersección con el rayo. Debería mirarla como si presionara, y enviar un rayo a la pantalla. Deberias escribir un

 objectsUnderPoint( x, y ); 

función que devuelve una matriz de todas las imágenes que se intersecan con el rayo en x, y.

Esta es la única respuesta correcta real, y así es como generalmente se hace en motores 3D también.