1. Inicio
  2. Pregunta y respuesta
  3. ¿Cómo agrego un controlador de eventos onClick simple a un elemento canvas?

¿Cómo agrego un controlador de eventos onClick simple a un elemento canvas?

2012-03-26 13 views
84

Soy un experimentado programador de Java, pero estoy viendo cosas de JavaScript/HTML5 por primera vez en aproximadamente una década. Estoy completamente perplejo sobre lo que debería ser la cosa más simple de la historia.¿Cómo agrego un controlador de eventos onClick simple a un elemento canvas?

Como ejemplo, solo quería dibujar algo y agregarle un manejador de eventos. Estoy seguro de que estoy haciendo algo estúpido, pero lo he buscado todo y nada de lo que se sugiere (por ejemplo, la respuesta a esta pregunta: Add onclick property to input with JavaScript) funciona. Estoy usando Firefox 10.0.1. Mi código sigue. Verá varias líneas comentadas y al final de cada una de ellas encontrará una descripción de qué (o qué no) sucede.

¿Cuál es la sintaxis correcta aquí? ¡Me estoy volviendo loco!

<html> 
<body> 
    <canvas id="myCanvas" width="300" height="150"/> 
    <script language="JavaScript"> 
     var elem = document.getElementById('myCanvas'); 
     // elem.onClick = alert("hello world"); - displays alert without clicking 
     // elem.onClick = alert('hello world'); - displays alert without clicking 
     // elem.onClick = "alert('hello world!')"; - does nothing, even with clicking 
     // elem.onClick = function() { alert('hello world!'); }; - does nothing 
     // elem.onClick = function() { alert("hello world!"); }; - does nothing 
     var context = elem.getContext('2d'); 
     context.fillStyle = '#05EFFF'; 
     context.fillRect(0, 0, 150, 100); 
    </script> 

</body>

Fuente

2012-03-26 Jer

+7

Use 'onclick' en lugar de' onClick' – noob

+0

Para explicar por qué esos intentos no funcionaron ... Los primeros dos comentarios muestran una alerta inmediatamente porque está llamando 'alert()' directamente en '

1

También se puede poner elementos DOM, como div en la parte superior de la tela que representaría sus elementos canvas y estar colocada de la misma manera.

Ahora puede adjuntar detectores de eventos a estos divs y ejecutar las acciones necesarias.

Fuente

2016-03-31 16:22:06

-1

Alex Answer es bastante limpio, pero cuando se utiliza el contexto de rotación puede ser difícil rastrear las coordenadas x, y, así que he hecho un Demo que muestra cómo hacer un seguimiento de eso.

Básicamente estoy usando esta función & dándole el ángulo & la cantidad de distancia recorrida en ese ángel antes de dibujar el objeto.

function rotCor(angle, length){ 
    var cos = Math.cos(angle); 
    var sin = Math.sin(angle); 

    var newx = length*cos; 
    var newy = length*sin; 

    return { 
     x : newx, 
     y : newy 
    }; 
}

Fuente

2017-01-24 15:55:10

Cuestiones relacionadas

 Cuestiones relacionadas