Sahifa sarlavhasi

HTML canvas o'zi nima?

H TML 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.

Element
	4.0	9.0	2.0	3.1	9.0

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:

JavaScript 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);
ctx.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("Salom Toshkent",10,50);

Stroke Text:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Salom Toshkent",10,50);

Draw Linear Gradient:

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);

Draw Circular Gradient:

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);

Rasm chizish:

var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);