MohirDox

Ko'rinishi

HTML Canvas Grafikalari ​

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

Quyidagi grafik <canvas> yordamida yaratilgan. Unda to'rt element ko'rsatilgan: qizil to'rtburchak, gradient to'rtburchak, rang-barang to'rtburchak va rang-barang matn.

html
<canvas id="meningKanvasim" width="270" height="160" style="border:1px solid #c3c3c3; float:left; margin-right:20px; margin-bottom:15px;">
Brauzeringiz &lt;canvas&gt; elementini qo'llab-quvvatlamaydi.
</canvas>
<script>
var kanvas = document.getElementById("meningKanvasim");
var kanvasOK = 1;
try { kanvas.getContext("2d"); }
catch (xato) { kanvasOK = 0; }
if (kanvasOK == 1) {
  var kontekst = kanvas.getContext("2d");
  kontekst.fillStyle = "#FF0000";
  kontekst.fillRect(20, 20, 100, 50);

  var gradient = kontekst.createLinearGradient(140, 20, 240, 70);
  gradient.addColorStop(0, "black");
  gradient.addColorStop(1, "white");
  kontekst.fillStyle = gradient;
  kontekst.fillRect(140, 20, 100, 50);

  var gradient2 = kontekst.createLinearGradient(20, 90, 120, 90);
  gradient2.addColorStop(0, "black");
  gradient2.addColorStop(0.3, "magenta");
  gradient2.addColorStop(0.5, "blue");
  gradient2.addColorStop(0.6, "green");
  gradient2.addColorStop(0.8, "yellow");
  gradient2.addColorStop(1, "red");
  kontekst.fillStyle = gradient2;
  kontekst.fillRect(20, 90, 100, 50);

  kontekst.font = "30px Verdana";
  var gradient3 = kontekst.createLinearGradient(140, 20, 240, 90);
  gradient3.addColorStop(0, "black");
  gradient3.addColorStop(0.3, "magenta");
  gradient3.addColorStop(0.6, "blue");
  gradient3.addColorStop(0.8, "green");
  gradient3.addColorStop(1, "red");
  kontekst.strokeStyle = gradient3;
  kontekst.strokeText("Tabassum!", 140, 120);
}
</script>

HTML Canvas nima? ​

HTML <canvas> elementi JavaScript yordamida grafiklarni chizish uchun ishlatiladi.

<canvas> elementi faqat grafiklar uchun konteyner hisoblanadi. Grafiklarni chizish uchun JavaScriptdan foydalanish kerak.

Canvasda yo'llar, to'rtburchaklar, doiralar, matn va rasmlar chizish uchun bir nechta metodlar mavjud.

Canvas barcha asosiy brauzerlar tomonidan qo'llab-quvvatlanadi.

Canvas Misollar ​

Canvas HTML sahifasida to'rtburchak maydon hisoblanadi. Odatiy holatda canvasda chegara va kontent bo'lmaydi.

Belgilar quyidagicha ko'rinadi:

html
<canvas id="meningKanvasim" width="200" height="100"></canvas>

Eslatma: Har doim id atributini belgilang (skriptda murojaat qilish uchun), va width hamda height atributlari orqali canvas o'lchamini aniqlang. Chegara qo'shish uchun style atributidan foydalaning.

Quyida oddiy, bo'sh canvas misoli:

html
<canvas id="meningKanvasim" width="200" height="100" style="border:1px solid #000000;">
Brauzeringiz canvas elementini qo'llab-quvvatlamaydi.
</canvas>

JavaScript Qo'shish ​

To'rtburchak canvas maydonini yaratgandan so'ng, grafik chizish uchun JavaScript kodini qo'shish kerak.

Quyida ba'zi misollar keltirilgan:

Chiziq Chizish ​

html
<canvas id="kanvasChiziq" width="200" height="100" style="border:1px solid #d3d3d3;">
Brauzeringiz canvas elementini qo'llab-quvvatlamaydi.
</canvas>
<script>
var kanvas = document.getElementById("kanvasChiziq");
var kanvasOK = 1;
try { kanvas.getContext("2d"); }
catch (xato) { kanvasOK = 0; }
if (kanvasOK == 1) {
  var kontekst = kanvas.getContext("2d");
  kontekst.moveTo(0, 0);
  kontekst.lineTo(200, 100);
  kontekst.stroke();
}
</script>

Misol ​

js
var kanvas = document.getElementById("meningKanvasim");
var kontekst = kanvas.getContext("2d");
kontekst.moveTo(0, 0);
kontekst.lineTo(200, 100);
kontekst.stroke();

Doira Chizish ​

html
<canvas id="kanvasDoira" width="200" height="100" style="border:1px solid #d3d3d3;">
Brauzeringiz canvas elementini qo'llab-quvvatlamaydi.
</canvas>
<script>
var kanvas = document.getElementById("kanvasDoira");
var kanvasOK = 1;
try { kanvas.getContext("2d"); }
catch (xato) { kanvasOK = 0; }
if (kanvasOK == 1) {
  var kontekst = kanvas.getContext("2d");
  kontekst.beginPath();
  kontekst.arc(95, 50, 40, 0, 2 * Math.PI);
  kontekst.stroke();
}
</script>

Misol ​

js
var kanvas = document.getElementById("meningKanvasim");
var kontekst = kanvas.getContext("2d");
kontekst.beginPath();
kontekst.arc(95, 50, 40, 0, 2 * Math.PI);
kontekst.stroke();

Matn Chizish ​

html
<canvas id="kanvasMatn" width="200" height="100" style="border:1px solid #d3d3d3;">
Brauzeringiz canvas elementini qo'llab-quvvatlamaydi.
</canvas>
<script>
var kanvas = document.getElementById("kanvasMatn");
var kanvasOK = 1;
try { kanvas.getContext("2d"); }
catch (xato) { kanvasOK = 0; }
if (kanvasOK == 1) {
  var kontekst = kanvas.getContext("2d");
  kontekst.font = "30px Arial";
  kontekst.fillText("Salom Dunyo", 10, 50);
}
</script>

Misol ​

js
var kanvas = document.getElementById("meningKanvasim");
var kontekst = kanvas.getContext("2d");
kontekst.font = "30px Arial";
kontekst.fillText("Salom Dunyo", 10, 50);

Stroke Matn Chizish ​

html
<canvas id="kanvasStrokeMatn" width="200" height="100" style="border:1px solid #d3d3d3;">
Brauzeringiz canvas elementini qo'llab-quvvatlamaydi.
</canvas>
<script>
var kanvas = document.getElementById("kanvasStrokeMatn");
var kanvasOK = 1;
try { kanvas.getContext("2d"); }
catch (xato) { kanvasOK = 0; }
if (kanvasOK == 1) {
  var kontekst = kanvas.getContext("2d");
  kontekst.font = "30px Arial";
  kontekst.strokeText("Salom Dunyo", 10, 50);
}
</script>

Misol ​

js
var kanvas = document.getElementById("meningKanvasim");
var kontekst = kanvas.getContext("2d");
kontekst.font = "30px Arial";
kontekst.strokeText("Salom Dunyo", 10, 50);

Chiziqli Gradient Chizish ​

html
<canvas id="kanvasGradient" width="200" height="100" style="border:1px solid #d3d3d3;">
Brauzeringiz canvas elementini qo'llab-quvvatlamaydi.
</canvas>
<script>
var kanvas = document.getElementById("kanvasGradient");
var kanvasOK = 1;
try { kanvas.getContext("2d"); }
catch (xato) { kanvasOK = 0; }
if (kanvasOK == 1) {
  var kontekst = kanvas.getContext("2d");
  // Gradient yaratish
  var gradient = kontekst.createLinearGradient(0, 0, 200, 0);
  gradient.addColorStop(0, "red");
  gradient.addColorStop(1, "white");
  // Gradient bilan to'ldirish
  kontekst.fillStyle = gradient;
  kontekst.fillRect(10, 10, 150, 80);
}
</script>

Misol ​

js
var kanvas = document.getElementById("meningKanvasim");
var kontekst = kanvas.getContext("2d");

// Gradient yaratish
var gradient = kontekst.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "white");

// Gradient bilan to'ldirish
kontekst.fillStyle = gradient;
kontekst.fillRect(10, 10, 150, 80);

Doiraviy Gradient Chizish ​

html
<canvas id="kanvasRadialGradient" width="200" height="100" style="border:1px solid #d3d3d3;">
Brauzeringiz canvas elementini qo'llab-quvvatlamaydi.
</canvas>
<script>
var kanvas = document.getElementById("kanvasRadialGradient");
var kanvasOK = 1;
try { kanvas.getContext("2d"); }
catch (xato) { kanvasOK = 0; }
if (kanvasOK == 1) {
  var kontekst = kanvas.getContext("2d");
  // Gradient yaratish
  var gradient = kontekst.createRadialGradient(75, 50, 5, 90, 60, 100);
  gradient.addColorStop(0, "red");
  gradient.addColorStop(1, "white");
  // Gradient bilan to'ldirish
  kontekst.fillStyle = gradient;
  kontekst.fillRect(10, 10, 150, 80);
}
</script>

Misol ​

js
var kanvas = document.getElementById("meningKanvasim");
var kontekst = kanvas.getContext("2d");

// Gradient yaratish
var gradient = kontekst.createRadialGradient(75, 50, 5, 90, 60, 100);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "white");

// Gradient bilan to'ldirish
kontekst.fillStyle = gradient;
kontekst.fillRect(10, 10, 150, 80);

Rasm Chizish ​

js
var kanvas = document.getElementById("meningKanvasim");
var kontekst = kanvas.getContext("2d");
var rasm = document.getElementById("scream");
kontekst.drawImage(rasm, 10, 10);

HTML Canvas Darsligi ​

<canvas> haqida batafsil o'rganish uchun HTML Canvas Tutorial sahifasini o'qing.