Анімація з jQuery

mousemove — це подія в JavaScript, яка виникає щоразу, коли курсор миші переміщується поверх елементу на веб-сторінці, зокрема в елементі canvas. У контексті canvas (веб-будови графіки на сторінці) ця подія використовується для відстеження позиції курсора миші та взаємодії з графічними елементами, що відображаються на canvas.
Застосування події mousemove в канвасі:

var circle = function (x, y, radius, fillCircle) {
            ctx.beginPath(); 
            ctx.arc(x, y, radius, 0, Math.PI * 2, false); 
            if (fillCircle) {
                ctx.fill();
            } else {
                ctx.stroke(); 
            };
        
Ball.prototype.draw = function (){
            circle(this.x, this.y, 3, true);
        };

Спершу ми вкладемо до коду функцію circle, ту ж, яку ми використовували раніше у попередній темі. Далі ми додаємо метод draw до властивості prototype конструктора Ball - Ball.prototype. Цей метод просто викликає circle(this.x, this.y, 3, true), щоб намалювати коло. Центр кола розташується на позиції (this.x, this.y) — локація м'яча. Він матиме радіус З пікселі. Ми передаємо true як фінальний аргумент, аби сказати функції circle заповнити коло кольором.

Щоб переміщати м'яч нам потрібно лише оновити його х- та у-властивості, базуючи нові властивості на його поточній швидкості. У цьому нам допоможе метод move:

jQuery — це популярна JavaScript бібліотека, яка полегшує маніпуляції з DOM, обробку подій, а також роботи з анімаціями. Вона дозволяє зручніше працювати з подіями, такими як mousemove, через простіший синтаксис.

click() — подія при кліку на елемент:

<p>Натисни на мене!</p>
<script>
$("p").click(function() {
alert("Ти натиснув на текст!");
});
</script>

dblclick() — подія при подвійному кліку:

<p>Подвійний клік на мене!</p>
<script>
$("p").dblclick(function() {
alert("Ти двічі натиснув на текст!");
});
</script>

mouseenter() — коли курсор заходить на елемент:

<p>Наведи курсор на мене!</p>
<script>
$("p").mouseenter(function() {
alert("Курсор на тексті!");
});
</script>

mousedown() — подія, коли кнопка миші натискається на елементі:

<p>Натисни кнопку миші на мені!</p>
<script>
$("p").mousedown(function() {
alert("Ти натиснув кнопку миші!");
});
</script>

mouseup() — подія, коли кнопка миші відпускається:

<p>Відпусти кнопку миші на мені!</p>
<script>
$("p").mouseup(function() {
alert("Ти відпустив кнопку миші!");
});
</script>

mousemove() — подія, коли мишка рухається над елементом:

<p>Рухай мишею над текстом!</p>
<script>
$("p").mousemove(function() {
alert("Мишка рухається над текстом!");
});
</script>

mouseleave() — подія, коли курсор залишає елемент:

<p>Наведи мишу і забери її, щоб побачити різницю!</p>
<script>
$("p").mouseleave(function() {
alert("Курсор залишив текст!");
});
</script>

Ці приклади показують, як кожна подія працює з елементом

hide() — ховає елемент:

<p>Натисни, щоб сховати мене!</p>
<script>
$("p").click(function() {
$(this).hide(); // Сховається тільки той параграф, на який натиснули
});
</script>

show() — показує елемент:

<button>Показати текст</button>
<p style="display:none;">Я прихований текст, натисни кнопку, щоб показати мене!</p>
<script>
$("button").click(function() {
$("p").show(); // Показує прихований параграф
});
</script>

css() — змінює стилі елемента:

<p>Натисни, щоб змінити мій колір!</p>
<script>
$("p").click(function() {
$(this).css("color", "red"); // Змінює колір тексту на червоний тільки у цього параграфа
});
</script>

text() — змінює текст всередині елемента:

<p>Натисни, щоб змінити цей текст!</p>
<script>
$("p").click(function() {
$(this).text("Текст змінився після натискання!"); // Змінює текст цього параграфа
});
</script>

Ці приклади демонструють, як можна використовувати функції $(this) для роботи з конкретними елементами та їх стилями або текстом. Можеш застосувати їх на своїй сторінці!

<canvas id="canvas" width="500" height="500"></canvas>
<p id="text">Координати миші: X: 0, Y: 0</p>
<script>
const canvas = document.getElementById("canvas"); 
const ctx = canvas.getContext("2d");

ctx.beginPath();  // Починаємо нову лінію
ctx.rect(0, 0, canvas.width, canvas.height);  // Прямокутник по всьому канвасу
ctx.stroke();  // Обрисовуємо рамку

// Використовуємо jQuery для обробки події mousemove
$(canvas).mousemove(function(event) {
let x = event.offsetX;  // Отримуємо координати X мишки
let y = event.offsetY;  // Отримуємо координати Y мишки

// Оновлюємо текст у параграфі з новими координатами
$('#text').text(`Координати миші: X: ${x}, Y: ${y}`);
});
</script>

В цьому прикладі:
Ми використовуємо jQuery для доступу до елемента canvas, який отримуємо через $('#canvas').
Далі, з допомогою jQuery ми додаємо обробник події mousemove на canvas, використовуючи $(canvas).mousemove.
Подія mousemove отримує координати мишки (event.offsetX та event.offsetY).
Глобальні змінні допомагають зберігати спільні значення, що використовуються у всьому script, наприклад, координати для анімацій.
Подія mousemove відслідковує рух мишки та дозволяє маніпулювати графікою на полотні в реальному часі. jQuery полегшує роботу з DOM та подіями, дозволяючи швидше додавати функціональність для відслідковування позиції мишки по полотні і реагувати на ці зміни.
У нашому коді jQuery допомагає легше працювати з подіями, такими як рух миші, і змінювати текст на сторінці. Замість того, щоб писати довгий код, jQuery дозволяє зробити все набагато швидше і зрозуміліше. Це дуже допомагає, якщо в майбутньому потрібно буде додавати більше подій або змін на сторінці, тому що jQuery робить код коротким і простим, а отже, тобі буде легше підтримувати і розвивати свій сайт.

Також давайте розглянемо детальний приклад, де квадрат збільшується при наведенні курсору миші:

<!DOCTYPE html>
<html lang="en">
<head>
<title>ПРИКЛАД</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<canvas id="canvas" width="640" height="480"></canvas>

<script>
var canvas, ctx; // глобальні змінні для тегу canvas (полотно)
var width, height; // глобальні змінні для збереження ширини і висоти полотна
var $square = []; // глобальна змінна для збереження параметрів квадрату (позиція і розмір)

// Функція для малювання фігур
function drawCanvas() {
    clear(); // Очищаємо полотно перед малюванням нової фігури

    if($square.a) { // Якщо квадрат активний
        ctx.fillStyle = 'rgba(35, 225, 35, 1.0)'; // Колір фону (зелений)
        ctx.beginPath(); // Початок малювання фігури
        // Малюємо квадрат (по осям x, y, ширина і висота)
        ctx.fillRect($square.x - $square.size/2 - 10, $square.y - $square.size/2 - 10, $square.size + 20, $square.size + 20) 
        ctx.closePath(); // Кінець малювання фігури
        ctx.fill(); // Заповнюємо фігуру кольором
    } else { // Якщо квадрат неактивний
        ctx.fillStyle = 'rgba(255, 35, 35, 1.0)'; // Колір фону (червоний)
        ctx.beginPath(); // Початок малювання фігури
        // Малюємо квадрат (по осям x, y, ширина і висота)
        ctx.fillRect($square.x - $square.size/2 - 10, $square.y - $square.size/2 - 10, $square.size, $square.size) 
        ctx.closePath(); // Кінець малювання фігури
        ctx.fill(); // Заповнюємо фігуру кольором
    }
}

// Функція для очищення полотна
function clear() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Очищаємо весь канвас
}

$(function() {
    canvas = document.getElementById('canvas'); // Знаходимо елемент canvas за id
    ctx = canvas.getContext('2d'); // Отримуємо контекст малювання 2D

    width = canvas.width; // Зберігаємо ширину полотна
    height = canvas.height; // Зберігаємо висоту полотна

    // Ініціалізуємо параметри квадрату
    $square.x = 320; // Початкова позиція по осі X
    $square.y = 240; // Початкова позиція по осі Y
    $square.size = 60; // Розмір квадрату
    $square.a = false; // Початковий стан квадрату (неактивний)

    drawCanvas(); // Малюємо квадрат вперше

    // Обробник події руху мишки
    $('#canvas').mousemove(function(e) {
        var mouseX = e.offsetX || 0; // Отримуємо координати мишки по осі X
        var mouseY = e.offsetY || 0; // Отримуємо координати мишки по осі Y

        // Перевіряємо, чи знаходиться курсор всередині квадрату
        if(mouseX > $square.x - $square.size/2 && mouseX < $square.x + $square.size/2
            && mouseY > $square.y - $square.size/2 && mouseY < $square.y + $square.size/2
        ){
            $square.a=true; // Якщо курсор всередині, квадрат стає активним
        } else {
            $square.a=false; // Якщо курсор поза квадратом, квадрат неактивний
        }
    });

    setInterval(drawCanvas, 30); // Оновлюємо малювання кожні 30 мілісекунд (приблизно 33 кадри в секунду)
});
</script>
</body>
</html>