<canvas>
Misol
Qizil to‘rtburchakni dinamik tarzda chizing va uni <canvas> elementi ichida ko‘rsating:
<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>
<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
<canvas> tegi skript (odatda JavaScript) yordamida grafikani dinamik chizish uchun ishlatiladi.
<canvas> tegi shaffof bo‘lib, faqat grafika uchun konteyner hisoblanadi; grafikani haqiqatda chizish uchun skriptdan foydalanishingiz kerak.
<canvas> elementi ichidagi har qanday matn JavaScript o‘chirilgan brauzerlarda va <canvas> elementini qo‘llab-quvvatlamaydigan brauzerlarda ko‘rsatiladi.
Maslahatlar va eslatmalar
Maslahat: <canvas> elementi haqida HTML Canvas darsligimizda ko‘proq bilib oling.
Maslahat: Barcha xususiyat va metodlarning to‘liq ma’lumotnomasi uchun HTML Canvas ma’lumotnomasi sahifamizga kiring.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi raqamlar elementni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Atributlar
| Atribut | Qiymat | Tavsif |
|---|---|---|
| height | pixels | Canvas balandligini belgilaydi. Standart qiymat — 150 |
| width | pixels | Canvas kengligini belgilaydi. Standart qiymat — 300 |
Global atributlar
<canvas> tegi HTML’dagi global atributlarni ham qo‘llab-quvvatlaydi.
Hodisa atributlari
<canvas> tegi HTML’dagi hodisa atributlarini ham qo‘llab-quvvatlaydi.
Ko‘proq misollar
Misol
Yana bir <canvas> misoli:
<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>
O‘zingiz sinab ko‘ring »
Standart CSS sozlamalari
Ko‘pchilik brauzerlar <canvas> elementini quyidagi standart qiymatlar bilan ko‘rsatadi:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!