どのように私はcanvas要素への単純なonClickイベントハンドラを追加しますか？

どのように私はcanvas要素への単純なonClickイベントハンドラを追加しますか？

あなたが描くとcanvas要素は、単にビットマップを描画している即時モード。

要素描かれている（図形、線、イメージ）は、それらが使用画素とその色以外に何の表現を持っていません。

そのため、取得するためにクリックのイベントcanvas 要素、あなたは上のイベントをクリックキャプチャする必要がある（形状）をcanvas、HTML要素とクリックされた要素を決定するためにいくつかの数学を使用するには、あなたが要素の幅/高さを格納しているとのx / yがオフセット提供しました。

追加するにはclickあなたにイベントをcanvas要素、使用して...

canvas.addEventListener('click', function() { }, false);

何を決定するために、要素、クリックされました...

var elem = document.getElementById('myCanvas'), elemLeft = elem.offsetLeft, elemTop = elem.offsetTop, context = elem.getContext('2d'), elements = []; // Add event listener for `click` events. elem.addEventListener('click', function(event) { var x = event.pageX - elemLeft, y = event.pageY - elemTop; // Collision detection between clicked offset and element. elements.forEach(function(element) { if (y > element.top && y < element.top + element.height && x > element.left && x < element.left + element.width) { alert('clicked an element'); } }); }, false); // Add element. elements.push({ colour: '#05EFFF', width: 150, height: 100, top: 20, left: 15 }); // Render elements. elements.forEach(function(element) { context.fillStyle = element.colour; context.fillRect(element.left, element.top, element.width, element.height); });​

jsFiddle。

このコードは、添付clickのイベントcanvas要素を、その後（と呼ばれるものの形状押すelementと私のコードで）elementsアレイ。あなたがここに望む限り多くを追加することができます。

私たちは、後でそのプロパティを照会することができるので、オブジェクトの配列を作成する目的です。すべての要素の後を通じて、配列、我々ループにプッシュし、そのプロパティに基づいて、それぞれをレンダリングしてきました。

ときにclickイベントがトリガされ、コード要素をループし、クリックがの要素のいずれかを超えたか否かを判断するelementsアレイ。もしそうなら、それは発火alert()簡単にあなたが別の必要があると思い、その場合には、配列項目、削除などの何かをするように変更することができた、レンダリング更新する機能をcanvas。

完全を期すために、なぜあなたの試みはうまくいきませんでした...

elem.onClick = alert("hello world"); // displays alert without clicking

これは、の戻り値代入されるalert()までonClickのプロパティをelem。それはすぐに呼び出していますalert()。

elem.onClick = alert('hello world'); // displays alert without clicking

JavaScriptでは、'および"意味的に同一であり、レクサーは、おそらく使用しています['"]引用符のために。

elem.onClick = "alert('hello world!')"; // does nothing, even with clicking

あなたは、文字列に代入されているonClickのプロパティをelem。

elem.onClick = function() { alert('hello world!'); }; // does nothing

JavaScriptは大文字と小文字が区別されます。onclickプロパティには、イベントハンドラを取り付ける古風な方法です。それだけで一つのイベントがプロパティで取り付けることができ、HTMLを直列化すると、イベントが失われることがあります。

elem.onClick = function() { alert("hello world!"); }; // does nothing

ここでも、' === "。