17

JavaScript のクリック機能に問題があります。これは私のコードです:

var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext('2d');

BigCircle = function(x, y, color, circleSize) {
    ctx.shadowBlur = 10;
    ctx.shadowColor = color;
    ctx.beginPath();
    ctx.arc(x, y, circleSize, 0, Math.PI * 2, true);
    ctx.fill();
    ctx.closePath();
};

var bigGreen = new BigCircle(1580, 800, '#5eb62b', 180);

function init() {
    $("#bigGreen").click(function(e){
    alert("test");              
    });
}
$(document).ready(function() {
    init();
});

しかし、クリックイベントが機能していません! 理由を知っている人はいますか？よろしくお願いします！

4

4 に答える 4

16

あなたのHTMLを見ないと、この質問は少し不明確です。キャンバスに何かを描き、jqueryを使用してサークルのクリックイベントを追加したいようですが、これは不可能です。

jqueryを使用してキャンバス上のクリックイベントを取得し、カーソル位置からユーザーが円をクリックしたかどうかを計算できますが、jqueryはここでは役に立ちません。自分で計算する必要があります。

jquery は dom 要素に対してのみ機能します。

BigCircle = function(ctx,x, y, color, circleSize) {
    ctx.beginPath();
    ctx.arc(x, y, circleSize, 0, Math.PI * 2, true);
    ctx.fillStyle=color
    ctx.fill();
    ctx.closePath();
    this.clicked=function(){
      ctx.fillStyle='#ff0000'
      ctx.fill();
    }
};

function init() {
  var canvas = document.getElementsByTagName("canvas")[0];
  var ctx = canvas.getContext('2d');
  var bigGreen = new BigCircle(ctx,50, 50, '#5eb62b', 50);
  $('#canvas').click(function(e){
    var x = e.clientX
      , y = e.clientY          
    if(Math.pow(x-50,2)+Math.pow(y-50,2) < Math.pow(50,2))   
      bigGreen.clicked()
  })    
}


$(document).ready(function() {
    init();   
});

</p>

jsfiddle はこちら http://jsfiddle.net/yXVrk/1/

于 2012-09-27T16:35:07.580 に答える
0

bigGreen は HTML に含まれていないため、$("#bigGreen") は何も選択しません。JavaScript 関数などにクリック関数を配置することはできません。それらは DOM には存在しないのに、どうやってクリックできるでしょうか? "canvas" は HTML 要素であるため、#bigGreen を #canvas に置き換える必要があります。

ここでこれを示すためにあなたのフィドルをフォークしました。

編集: ユーザーが特定の円をクリックしたことを確認したい場合は、キャンバスのクリック イベントを使用してから、クリック イベントに渡された座標によってクリックされた円を特定します。

于 2012-09-27T16:40:24.560 に答える