10.1 Canvas ilə İşin Əsasları
Canvas API developer-lərə veb tətbiqlərində ikiölçülü qrafiklər və animasiyalar yaratmaq üçün yaxşı alətlər təqdim edir. Bu mühazirədə biz Canvas API ilə işin əsaslarını, o cümlədən elementlərin yaradılması, qrafiklərin çəkilməsi və animasiyaların yaradılmasını nəzərdən keçirəcəyik.
<canvas> elementi yaratmaq
HTML-də <canvas> elementi müxtəlif qrafik əməliyyatlarını yerinə yetirə biləcəyiniz çəkim sahəsi yaratmaq üçün istifadə olunur:
<canvas id="myCanvas" width="800" height="600"></canvas>
Çəkim kontekstinin əldə edilməsi
<canvas> elementində çəkim əməliyyatlarını yerinə yetirmək üçün çəkim konteksti əldə edilməlidir. İkiölçülü qrafika üçün 2d konteksti istifadə olunur:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
10.2 Canvas-da Çəkmə
1. Düzbucaqlılar
Canvas API doldurulmuş və çərçivəli düzbucaqlıların çəkilməsi üçün metodlar təqdim edir.
Doldurulmuş düzbucaqlı — fillRect:
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'mavi';
ctx.fillRect(10, 10, 150, 100);
</script>
</body>
</html>
Çərçivəli düzbucaqlı — strokeRect:
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'qırmızı';
ctx.strokeRect(200, 10, 150, 100);
</script>
</body>
</html>
Sahənin təmizlənməsi
clearRect metodu müəyyən edilmiş sahəni təmizləmək üçün istifadə olunur:
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'qırmızı';
ctx.strokeRect(200, 10, 150, 100);
ctx.clearRect(0, 0, 800, 600);
</script>
</body>
</html>
2. Xətlər
Xətlərin çəkilməsi üçün beginPath metodu istifadə olunur və moveTo və lineTo metodları xətlərin koordinatlarını təyin edir:
<html>
<head>
<title>Sənəd</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. Dairələr və qövslər
arc metodu dairələr və qövslərin çəkilməsi üçün istifadə olunur:
<html>
<head>
<title>Sənəd</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 = 'yaşıl';
ctx.fill();
</script>
</body>
</html>
4. Mətnlər
fillText və strokeText metodları mətnlər çəkmək üçün istifadə olunur:
<html>
<head>
<title>Sənəd</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 = 'qara';
ctx.fillText('Salam Canvas', 10, 350);
</script>
</body>
</html>
5. Qradientlər
Canvas API xətti və şüa qradientlərin yaradılmasını dəstəkləyir.
Xətti qradient:
<html>
<head>
<title>Sənəd</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, 'qırmızı');
gradient.addColorStop(1, 'mavi');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);
</script>
</body>
</html>
Şüa qradient:
<html>
<head>
<title>Sənəd</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, 'sarı');
radialGradient.addColorStop(1, 'yaşıl');
ctx.fillStyle = radialGradient;
ctx.fillRect(300, 100, 200, 200);
</script>
</body>
</html>
6. Şəkillər
drawImage metodu Canvas-da şəkillərin çəkilməsi üçün istifadə olunur:
<html>
<head>
<title>Sənəd</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>Sənəd</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-da Animasiya
Animasiya yaratmaq üçün requestAnimationFrame metodu istifadə olunur. Bu metod animasiyanın yeni kadrını çəkmək üçün göstərilən funksiyanı çağırır.
1. Animasiya əsasları
Sadə animasiyanın nümunəsi:
<html>
<head>
<title>Sənəd</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 = 'mavi';
ctx.fillRect(x, y, 50, 50);
x += 2;
y += 2;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
2. Mürəkkəb animasiyalar
Dairənin animasiyası nümunəsi:
<html>
<head>
<title>Sənəd</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 = 'mavi';
ctx.fill();
ctx.beginPath();
ctx.arc(centerX + Math.cos(angle) * 100, centerY + Math.sin(angle) * 100, radius, 0, Math.PI * 2);
ctx.fillStyle = 'qırmızı';
ctx.fill();
angle += 0.05;
requestAnimationFrame(animateCircle);
}
animateCircle();
</script>
</body>
</html>
3. Taymerlərdən istifadə
Animasiya yaratmaq üçün setInterval və setTimeout metodlarından da istifadə etmək olar.
setInterval istifadə edərək animasiya nümunəsi:
<html>
<head>
<title>Sənəd</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 = 'mavi';
ctx.fillRect(x, y, 50, 50);
x += 2;
y += 2;
}
setInterval(draw, 30);
</script>
</body>
</html>
GO TO FULL VERSION