Informatika va at

HTML Canvas O'zi Nima?
HTML elementi skriptlash orqali (odatda JavaScript) grafiklar chizish uchun ishlatiladi.


elementi bu faqat grafiklar uchun konteynerdir. Siz haqiqiy ma'noda grafiklar chizish uchun skript ishlatishingiz shart.

Canvasning (paths), to'rtburchak yuzalar, aylanalar chizish, matnlar kiritish va rasmlar qo'shish uchun bir necha funksiyalari mavjud.

Brauzerlarda Qo'llab Quvvatlashi

Jadvaldagi quyidagi brauzerlar elementlarini to'la qo'llab quvvatlaydi.

Canvas: misollar

Canvas bu HTML sahifasidagi to'rtburchak yuzadir. Odatda, canvasning border yani chegara chizig'i va hech qanday ma'lumot bo'lmaydi.

U quyidagicha ko'rinishda bo'ladi:

Eslatma: Har doim id atributini (skriptda ifodalanishi uchun), hamda canvasning eni va bo'yini aniqlashtirish uchun width (eni) va height (bo'yi) larni keltiring.

Atrofiga hoshiya(border) qo'shish uchun, style atributidan foydalaning:

Namuna:




J avaScript Orqali Chizish:
var c = document.getElementById("Canvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75);

To'g'ri Chiziq Chizish:

var c = document.getElementById("Canvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0);
c tx.lineTo(200,100); ctx.stroke();

Aylana Chizish:

var c = document.getElementById("Canvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();

Tekst chizish:

var c = document.getElementById("Canvas"); var ctx = c.getContext("2d");
ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50);