10.1 Основи роботи з Canvas
Canvas API надає розробникам круті інструменти для створення двовимірної графіки та анімацій у вебзастосунках. У цій лекції ми розглянемо основи роботи з Canvas API, зокрема створення елементів, малювання графіки та створення анімацій.
Створення елемента <canvas>
Елемент <canvas> у HTML використовується для створення області малювання, де можна виконувати різноманітні графічні операції:
<canvas id="myCanvas" width="800" height="600"></canvas>
Отримання контексту малювання
Для виконання операцій малювання на елементі <canvas> необхідно отримати контекст малювання. Для двовимірної графіки використовується контекст 2d:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
10.2 Малювання на Canvas
1. Прямокутники
Canvas API надає методи для малювання заповнених і обведених прямокутників.
Заповнений прямокутник — fillRect:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 100);
</script>
</body>
</html>
Обведений прямокутник — strokeRect:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(200, 10, 150, 100);
</script>
</body>
</html>
Очищення області
Метод clearRect використовується для очищення визначеної області:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(200, 10, 150, 100);
ctx.clearRect(0, 0, 800, 600);
</script>
</body>
</html>
2. Лінії
Для малювання ліній використовується метод beginPath для початку нового шляху та методи moveTo і lineTo для визначення координат ліній:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(250, 150);
ctx.lineTo(150, 300);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
3. Кола та дуги
Метод arc використовується для малювання кіл та дуг:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(400, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();
</script>
</body>
</html>
4. Текст
Методи fillText і strokeText використовуються для малювання тексту:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Привіт Canvas', 10, 350);
</script>
</body>
</html>
5. Градієнти
Canvas API підтримує створення лінійних та радіальних градієнтів.
Лінійний градієнт:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);
</script>
</body>
</html>
Радіальний градієнт:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const radialGradient = ctx.createRadialGradient(400, 200, 20, 400, 200, 100);
radialGradient.addColorStop(0, 'yellow');
radialGradient.addColorStop(1, 'green');
ctx.fillStyle = radialGradient;
ctx.fillRect(300, 100, 200, 200);
</script>
</body>
</html>
6. Зображення
Метод drawImage використовується для малювання зображень на Canvas:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 256, 256);
};
img.src = 'https://cdn.javarush.com/images/article/ebb06cf3-0e04-45bd-a33e-31fe096fd323/256.jpeg';
</script>
</body>
</html>
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 256, 256);
};
img.src = 'path/to/image-1.jpg';
</script>
</body>
</html>
10.3 Анімації на Canvas
Для створення анімацій використовується метод requestAnimationFrame, який викликає задану функцію для відмалювання нового кадру анімації.
1. Основи анімації
Приклад простої анімації:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'синій';
ctx.fillRect(x, y, 50, 50);
x += 2;
y += 2;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
2. Складні анімації
Приклад анімації круга:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let angle = 0;
function animateCircle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.fillStyle = 'синій';
ctx.fill();
ctx.beginPath();
ctx.arc(centerX + Math.cos(angle) * 100, centerY + Math.sin(angle) * 100, radius, 0, Math.PI * 2);
ctx.fillStyle = 'червоний';
ctx.fill();
angle += 0.05;
requestAnimationFrame(animateCircle);
}
animateCircle();
</script>
</body>
</html>
3. Використання таймерів
Для створення анімацій також можна використати методи setInterval і setTimeout.
Приклад анімації з використанням setInterval:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'синій';
ctx.fillRect(x, y, 50, 50);
x += 2;
y += 2;
}
setInterval(draw, 30);
</script>
</body>
</html>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ