Изображения холста и событие Click

Question

У меня есть два круга в теге <canvas> с HTML5 & JavaScript.

Теперь я пытаюсь добавить изображение (сделанное), которое изменяется в зависимости от мыши и щелчка.

Это в основном реализация кнопки воспроизведения/паузы с дополнительным изменением цвета, когда пользователь нажимает кнопку мыши.

Я не могу показаться, чтобы выяснить, как события работать на формы в HTML5, так как они не являются объектами ... Вот мой код в данный момент:

window.onload = function() { 

     var canvas = document.getElementsByTagName('canvas')[0]; 
     var context = canvas.getContext('2d'); 
     var centerX = canvas.width/2; 
     var centerY = canvas.height/2; 


     //Outer circle 
     context.beginPath(); 
     context.arc(centerX, centerY, 150, 0, Math.PI * 2, false); 
     context.fillStyle = "#000"; 
     context.fill(); 
     context.stroke(); 

     //Inner cicle 
     context.beginPath(); 
     context.arc(centerX, centerY, 75, 0, Math.PI * 2, false); 
     context.fillStyle = "#fff"; 
     context.fill(); 
     context.stroke(); 

     //Play/Pause button 
     var imagePlay = new Image(); 
     var imageHeight = 48/2; 
     imagePlay.onload = function() { 
     context.drawImage(imagePlay, centerX - imageHeight, centerY - imageHeight); 
     }; 
     imagePlay.src = "images/play.gif"; 

} 

1) Как обрабатывать события на формах создано с <canvas>?

2) Как очистить/удалить изображения на <canvas> при замене его другим?

Заранее благодарен!

Answer 1

Технически невозможно зарегистрировать события мыши на фигурах, сделанных на холсте. Однако, если вы используете библиотеку, например Raphael (http://raphaeljs.com/), она может отслеживать позиции фигуры и, таким образом, определять, какая форма принимает событие мыши. вот пример:

var circle = r.circle(50, 50, 40); 

circle.attr({fill: "red"}); 

circle.mouseover(function (event) { 
    this.attr({fill: "red"}); 
}); 

Как вы можете видеть, это очень просто. Для изменения фигур эта библиотека также пригодится. Без этого вам нужно будет помнить, как перерисовывать все каждый раз, когда вы вносите изменения.

Answer 2

Ну Простой ответ вы не можете. Вам либо нужно будет найти координаты события click и рассчитать, хотите ли вы выполнить параметр или нет, либо использовать теги области и карты и наложить на него элемент холста. Чтобы изменить холст, используйте функцию clearRect, чтобы рисовать прямоугольник над всем, а затем перерисовывать то, что вы хотите.

Answer 3

1. Существует нет «встроенного» способа отслеживания фигур, нарисованных на холсте. Они не рассматриваются как объекты, а просто пиксели в области. Если вы хотите обрабатывать события на фигурах, нарисованных на холсте, вам нужно будет отслеживать область, в которой покрываются каждая форма, а затем определять, какую фигуру вы вызываете событие, на основе положения мыши.

2. Вы можете просто нарисовать поверх других фигур, если хотите что-то заменить. Вы можете взглянуть на globalCompositeOperation.

Если вы хотите обрабатывать свои рисунки как объекты, я бы рекомендовал вместовместо холста.

Другой вариант - использовать buttons, а затем стилизовать их с помощью CSS.

В принципе, то, что вы делаете сейчас, действительно не предназначено для использования или использования холста. Это похоже на использование карандаша для забивания гвоздей - вы используете неправильный инструмент для работы.

Answer 4

Хотя верно, что вы не можете создавать события щелчка для объектов, нарисованных на холсте, существует обход: оберните холст в теге DIV, а затем добавьте изображения в тег DIV над тегом CANVAS.

<div id="wrapper"> 
    <img src="img1.jpg" id="img1"></img> 
    <canvas id="thecanvas"></canvas> 
</div> 

Затем с помощью CSS, чтобы сделать положение изображения: абсолютный и использовать слева: * точки и сверху: * точки атрибутов, чтобы поместить изображение поверх холста, где вы бы обычно нарисованным его.

#img1{ 
position:absolute; 
left: 10px; 
top: 10px; 
} 

Вы можете добавить кнопку события на изображение, которое находится над холстом создается впечатление, что вы нажав на холсте (в приведенном ниже примере используется JQuery нажмите функция())

$("#img1").click(function(){ 
    alert("Thanks for clicking me"); 
}); 

Answer 5

Вы можете наложить луч на холст и вручную проверить свои изображения для пересечения с лучом. Вы должны смотреть на него, как вы нажимаете, и посылать луч в экран. Вы должны написать функцию

objectsUnderPoint(x, y); 

, который возвращает массив всех изображений, которые пересекаются с лучом в точке х, у.

Это единственный реальный правильный ответ, и так оно обычно выполняется в 3D-двигателях.