Jestem doświadczonym programistą Java, ale po raz pierwszy od dekady przyglądam się JavaScript / HTML5. Jestem kompletnie zaskoczony tym, co powinno być najprostszą rzeczą na świecie.
Jako przykład chciałem tylko narysować coś i dodać do tego procedurę obsługi zdarzeń. Jestem pewien, że robię coś głupiego, ale przeszukałem wszystko i nic, co jest sugerowane (np. Odpowiedź na to pytanie: Dodaj właściwość onclick do wprowadzania w JavaScript ) nie działa. Używam przeglądarki Firefox 10.0.1. Mój kod następuje. Zobaczysz kilka skomentowanych linii, a na końcu każdego z nich jest opis tego, co (lub co się nie dzieje).
Jaka jest poprawna składnia tutaj? Wariuję!
<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>
onclick
zamiastonClick
alert()
bezpośrednio<script>
, zamiast definiować funkcję, która wywołaalert()
. Reszta nic nie robi z powodu kapitalizacjionclick
.Odpowiedzi:
Kiedy rysujesz do
canvas
elementu, po prostu rysujesz bitmapę w trybie natychmiastowym .Te elementy (kształty, linie, obrazy), które są wystawione nie mają reprezentacji oprócz pikseli, których używają, a ich kolor.
Dlatego, aby uzyskać zdarzenie kliknięcia
canvas
elementu (kształtu), musisz przechwycić zdarzenia kliknięciacanvas
elementu HTML i użyć matematyki, aby określić, który element został kliknięty, pod warunkiem, że przechowujesz szerokość / wysokość i przesunięcie x / y elementów .Aby dodać
click
zdarzenie do swojegocanvas
elementu, użyj ...Aby określić, który element został kliknięty ...
jsFiddle .
Ten kod dołącza
click
zdarzenie docanvas
elementu, a następnie wypycha jeden kształt (nazywanyelement
w moim kodzie) doelements
tablicy. Możesz tutaj dodać tyle, ile chcesz.Celem tworzenia tablicy obiektów jest umożliwienie nam późniejszego zbadania ich właściwości. Po wypchnięciu wszystkich elementów do tablicy wykonujemy pętlę i renderujemy każdy z nich na podstawie ich właściwości.
Po
click
wyzwoleniu zdarzenia kod przechodzi przez elementy w pętli i określa, czy kliknięcie dotyczy któregokolwiek z elementówelements
tablicy. Jeśli tak, uruchamia plikalert()
, który można łatwo zmodyfikować, aby zrobić coś takiego, jak usunięcie elementu tablicy, w takim przypadku potrzebna byłaby oddzielna funkcja renderująca, aby zaktualizowaćcanvas
.Dla kompletności, dlaczego twoje próby nie zadziałały ...
To jest przypisanie wartości zwracanej
alert()
doonClick
właściwościelem
. Natychmiast wywołujealert()
.W JavaScript,
'
i"
są semantycznie identyczne, lekser prawdopodobnie używa['"]
cudzysłowów.Przypisujesz ciąg do
onClick
właściwościelem
.JavaScript rozróżnia wielkość liter.
onclick
Nieruchomość jest archaiczna metoda mocowania obsługi zdarzeń. Umożliwia dołączenie tylko jednego zdarzenia do właściwości, a zdarzenie może zostać utracone podczas serializacji kodu HTML.Ponownie
' === "
.źródło
Prawdopodobnie bardzo późno na odpowiedź, ale właśnie przeczytałem to przygotowując się do
70-480
egzaminu i okazało się, że działa -Zwróć uwagę na wydarzenie jako
onclick
zamiastonClick
.Przykład JS Bin .
źródło
Polecam następujący artykuł: Wykrywanie obszarów trafień dla płótna HTML5 i jak słuchać zdarzeń kliknięcia na kształtach płótna, który przechodzi przez różne sytuacje.
Nie obejmuje to jednak
addHitRegion
API, które musi być najlepszym sposobem (używanie funkcji matematycznych i / lub porównań jest dość podatne na błędy). To podejście jest szczegółowo opisane w witrynie developer.mozillaźródło
addHitRegion
] jest przestarzały. Chociaż może nadal działać w niektórych przeglądarkach, odradza się jego używanie, ponieważ można go usunąć w dowolnym momencie. Staraj się go unikać”. - z linku dev.moz, który dołączasz, aby zaoszczędzić innym kliknięcie.Jako alternatywa dla odpowiedzi Alexa:
Zamiast rysunku na płótnie można użyć rysunku SVG. Tam możesz dodawać zdarzenia bezpośrednio do narysowanych obiektów DOM.
zobacz na przykład:
Uczynienie obiektu obrazu SVG klikalnym za pomocą onclick, unikając pozycjonowania bezwzględnego
źródło
Możesz także umieścić elementy DOM,
div
na przykład na płótnie, które będą reprezentować elementy twojego płótna i będą ustawione w ten sam sposób.Teraz możesz dołączyć detektory zdarzeń do tych elementów div i uruchomić niezbędne działania.
źródło
Jako kolejna tania alternatywa na nieco statycznym płótnie, użycie nakładającego się elementu img z definicją usemap jest szybkie i brudne. Działa szczególnie dobrze w przypadku elementów kanwy opartych na wielokątach, takich jak wykres kołowy.
źródło
Alex Answer jest całkiem fajny, ale podczas używania obracania kontekstu może być trudno prześledzić współrzędne x, y, więc przygotowałem Demo pokazujące, jak to śledzić.
Zasadniczo używam tej funkcji i podam jej kąt i odległość pokonaną przez tego anioła przed rysowaniem obiektu.
źródło