web-dev-qa-db-ja.com

HTML5キャンバスクリックイベント

正方形の配列を作りました

ctx.fillStyle = "rgb(0,0,0)";
for(x=0;x<=25;x++){
  for(y=0;y<=25;y++){   
       ctx.fillRect(x, y, 20, 20); 
  }
}

四角をクリックすると色が変わるようにしたい。どうやってやるの？

HTML5についてはあまり知りませんので、助けが必要です。ありがとう。

htmlcanvasclick
22
RichadC

JQueryの使用：

最初に、クリックされたセルを特定し、その長方形の上に別の色で描画します。

 $("#canvas").click(function(e){

    var x = Math.floor((e.pageX-$("#canvas").offset().left) / 20);
    var y = Math.floor((e.pageY-$("#canvas").offset().top) / 20);
    ctx.fillStyle = "rgb(255,255,255)";
    ctx.fillRect(x*20, y*20, 20, 20);


 });
31
Márton Borlay

これは、Caleb Evansによる beta build が役立つかもしれません。以下のイベントが含まれています...

  • クリック
  • dblclick
  • マウスダウン
  • マウスアップ
  • マウスムーブ

jsFiddle のデモにリンクします。

6
Shekhar