私はキャンバスに円を描いています。私のサークルをクリック可能にすることは可能ですか？HTML5 Clicable canvas element？
function createCircle(context, x, y, radius, color) {
context.beginPath();
context.fillStyle = color;
context.arc(x, y, radius, 0, Math.PI * 2, true);
context.closePath();
context.fill();
}
もちろん可能です。カーソルを手に（リンク上と同じように）変更したいのであれば、それを行うこともできます。 onmousemoveイベントをキャンバスに追加するだけで、中心からの距離（ピタゴラスを使用する必要があるかもしれません）が半径より小さい場合、カーソルのキャンバスのCSSプロパティをポインタに変更します。それ以外の場合は、CSSプロパティをデフォルトに戻します。 同様に、onclickイベントを追加し、クリックされたときを検出し、それが本当であるときにあなたのものを行います。 キャンバスにクリック可能な円があります。
おかげさまで、私はそれを別名で行い、円形のイメージを貼り付けてそれを不可解にしました。はい、あなたの提案はいいです。 :)ありがとう – Raj
私は専門家ではないが、私はあなたがcanvasにclickイベントをキャプチャして、クリックした点が円の半径内にあるかどうかを確認functionを書くべきだと思います。 （すなわち、クリックされた点と円の原点との間の差は、半径以下である）。
しかし、キャンバス自体を使って、[あるポイントがパス内にあるかどうか]を知ることができます（http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element）。 .html＃dom-context-2d-ispointinpath） – ellisbben
本当ですか？私はそのコードをHTMLファイルにコピーしましたが、それはChrome上ではうまくいきませんでした。 @ellisbbenをサポートするブラウザはどれですか？ –
申し訳ありませんが、私は例のコードではなく、関数を指摘することを意図していました。彼らが提供する「例」コードはまっすぐに壊れていて、動作させることはできますが（http://jsfiddle.net/Hk5d6/3/）、私はそれを基本として使用しません。 – ellisbben
あなたのキャンバスにマウスダウンイベントを追加することができますまたは単にキャンバスの使用の主な目的は、代わりにSVGを使用することを検討してクリック可能なオブジェクトを作成する場合
canvas.addEventListener('mousedown', function(evt)
{
var mousePos = getMousePos(canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
//Here ur getting mouse position x and y coordinates.
},
false);
としてイベントリスナーを追加することができます。 – robertc