HTML Canvas

HTML Canvas


Your browser does not support the <canvas> element.

HTML <canvas> elementi veb sahifada grafiklar chizish uchun ishlatiladi.

Chap tarafdagi grafik <canvas> bilan yaratilgan. U to'rtta elementni ko'rsatyapti: qizil, gradient, rang-barang tortburchak va rang-barang matn.


HTML Canvas O'zi Nima?

HTML <canvas> elementi skriptlash orqali (odatda JavaScript) grafiklar chizish uchun ishlatiladi.

<canvas> 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 <canvas> elementlarini to'la qo'llab quvvatlaydi.

Element
<canvas> 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:

<canvas id="Canvas" width="200" height="200"></canvas>

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:

<canvas id="Canvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

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

Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017