HTML Canvas
HTML <canvas> elementi veb-sahifada grafika chizish uchun ishlatiladi.
Chapdagi grafika <canvas> yordamida yaratilgan. U to‘rtta elementni
ko‘rsatadi: qizil to‘rtburchak, gradient to‘rtburchak, ko‘p rangli to‘rtburchak va ko‘p rangli matn.
HTML Canvas nima?
HTML <canvas> elementi JavaScript yordamida grafikalarni real vaqtda chizish uchun ishlatiladi.
<canvas> elementi faqat grafika uchun konteynerdir. Grafikalarni haqiqatda chizish uchun JavaScript dan foydalanishingiz shart.
Canvas da yo‘llar (paths), qutilar, doiralar, matn chizish va rasmlar qo‘shishning bir nechta usullari mavjud.
Canvas barcha asosiy brauzerlar tomonidan qo‘llab-quvvatlanadi.
Canvas misollari
Canvas — HTML sahifadagi to‘rtburchaklar hudud. Standart holda canvas ning chegarasi va kontenti yo‘q.
Belgilash (markup) quyidagicha ko‘rinadi:
<canvas id="myCanvas" width="200" height="100"></canvas>
Eslatma: Doim id atributini (skriptda ishora qilinishi uchun) va canvas o‘lchamini belgilash uchun
width va height atributlarini belgilang. Chegara qo‘shish uchun style atributidan foydalaning.
Bu yerda oddiy, bo‘sh canvas misoli keltirilgan:
Misol
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
O‘zingiz sinab ko‘ring »
JavaScript kodini qo‘shish
To‘rtburchak canvas hududini yaratgandan so‘ng, chizishni bajarish uchun JavaScript qo‘shishingiz shart.
Mana ba’zi misollar:
Chiziq chizish
Misol
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
O‘zingiz sinab ko‘ring »
Doira chizish
Misol
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
O‘zingiz sinab ko‘ring »
Matn chizish
Misol
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
O‘zingiz sinab ko‘ring »
Kontur matn
Misol
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
O‘zingiz sinab ko‘ring »
Chiziqli gradient chizish
Misol
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
O‘zingiz sinab ko‘ring »
Doiraviy gradient chizish
Misol
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
O‘zingiz sinab ko‘ring »
Rasm chizish
Misol
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
O‘zingiz sinab ko‘ring »
HTML Canvas darsligimizni
<canvas> haqida ko‘proq o‘rganish uchun
bizning HTML Canvas darsligimizni o‘qing.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!