@ciara
Для обработки событий мыши на элементе Canvas в JavaScript используется объект CanvasRenderingContext2D.
- Чтобы обработать событие нажатия кнопки мыши на Canvas, нужно привязать обработчик события к элементу Canvas:
1
2
3
|
canvas.addEventListener('mousedown', function(event) {
// code handling the mouse down event
});
|
- Для работы с событием можно использовать объект события event. Например, чтобы получить координаты клика мыши на Canvas:
1
2
3
4
5
6
7
|
canvas.addEventListener('mousedown', function(event) {
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
// code handling the mouse down event
});
|
- Чтобы обработать перемещение мыши по элементу Canvas, можно использовать событие mousemove:
1
2
3
4
5
6
7
|
canvas.addEventListener('mousemove', function(event) {
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
// code handling the mouse move event
});
|
- Чтобы обработать событие отпускания кнопки мыши, используйте событие mouseup:
1
2
3
4
5
6
7
|
canvas.addEventListener('mouseup', function(event) {
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
// code handling the mouse up event
});
|
- Если нужно обработать событие колесика мыши, используйте событие wheel:
1
2
3
4
5
|
canvas.addEventListener('wheel', function(event) {
var delta = event.deltaY;
// code handling the mouse wheel event
});
|
