1. дома
  2. Вопрос и ответ
  3. Как добавить простой обработчик события onClick в элемент холста?

Как добавить простой обработчик события onClick в элемент холста?

2012-03-26 3 views
84

Я опытный Java-программист, но я смотрю на некоторые материалы JavaScript/HTML5 впервые за десять лет. Я полностью зациклен на том, что должно быть самым простым.Как добавить простой обработчик события onClick в элемент холста?

В качестве примера я просто хотел нарисовать что-то и добавить к нему обработчик событий. Я уверен, что делаю что-то глупое, но я искал все и ничего, что было предложено (например, ответ на этот вопрос: Add onclick property to input with JavaScript) работает. Я использую Firefox 10.0.1. Далее следует мой код. Вы увидите несколько прокомментированных строк, а в конце каждого - описание того, что (а что нет).

Какой здесь синтаксис? Я схожу с ума!

<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>

источник

2012-03-26 Jer

+7

Используйте 'onclick' вместо' onClick' – noob

+0

Чтобы уточнить, почему эти попытки не сработали ... Первая пара комментариев отображает предупреждение немедленно, потому что вы вызываете 'alert()' непосредственно в '

1

Вы также можете поместить элементы DOM, как div на верхней части холста, который будет представлять ваши элементы холста и быть расположен таким же образом.

Теперь вы можете присоединить слушателей событий к этим divs и выполнить необходимые действия.

источник

2016-03-31 16:22:06

-1

Alex Answer довольно аккуратный, но при использовании поворота контекста может быть трудно проследить координаты x, y, поэтому я сделал Demo, показывая, как отслеживать это.

В основном я использую эту функцию &, придавая ей угол & количество пройденного расстояния в этом ангеле перед рисованием объекта.

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 
    }; 
}

источник

2017-01-24 15:55:10

0

Я рекомендую следующую статью: Hit Region Detection For HTML5 Canvas And How To Listen To Click Events On Canvas Shapes, которая проходит через различные ситуации.

Однако он не распространяется на API addHitRegion, который должен быть наилучшим способом (использование математических функций и/или сравнений вполне подвержено ошибкам). Этот подход подробно описан on developer.mozilla

источник

2018-02-23 10:22:36 RUser4512

Смежные вопросы

 Смежные вопросы