Событие click холста 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 и нуждаюсь в некоторой помощи. Спасибо.

Ответы

Ответ 1

Использование 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);


 });

Ответ 2

Эта бета-версия Калеба Эванса может помочь. Следующие события включены...

  • выберите
  • DblClick
  • MouseDown
  • MouseUp
  • MouseMove

Ссылка на демо на jsFiddle.