<canvas>

JavaScript yordamida manipulyatsiya qilinadigan sohani yaratadi.

<canvas> elementi sahifada bir soha - maydon yaratadi, unda JavaScript yordamida turli xil ob'ektlarni chizish, rasmlarni ko'rsatish, ularni o'zgartirish va xususiyatlarini tahrirlash mumkin. Ushbu element yordamida rasmlar, animatsiyalar, o'yinlar va boshqa narsalarni yaratishingiz mumkin.

Sintaksis

<canvas id="identificator">
</canvas>

Yopuvchi teg

Bo’lishi shart

Atributlar

Ushbu element uchun umumiy atributlar va hodisa (event)lar mavjud.

Misol

<!DOCTYPE html>
<html>
 <head>
  <title>canvas</title>
  <meta charset="utf-8">
  <script> 
   window.onload = function() {
    var drawingCanvas = document.getElementById('smile');
    if(drawingCanvas && drawingCanvas.getContext) {
     var context = drawingCanvas.getContext('2d');
     // Aylanani chizamiz
     context.strokeStyle = "#000";
     context.fillStyle = "#32cd32";
     context.beginPath();
     context.arc(100,100,50,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // Chap ko'zni chizamiz
     context.fillStyle = "#fff";
     context.beginPath();
     context.arc(84,90,8,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // O'ng ko'zni chizamiz
     context.beginPath();
     context.arc(116,90,8,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // Og'izni chizamiz
     context.beginPath();
     context.moveTo(70,115);
     context.quadraticCurveTo(100,130,130,115);
     context.quadraticCurveTo(100,150,70,115); 
     context.closePath();
     context.stroke();
     context.fill();
    }
   }
  </script>
 </head>
 <body>
  <canvas id="smile" width="200" height="200">
    <p>Sizning brauzeringiz ushbu chizmani qo'llab-quvvatlamaydi!.</p>
  </canvas>
 </body>
</html>

Natija

Internet Explorer	Edge	Chrome	Opera	Safari	Firefox
9	12	1	9	2	1.5

Android	Firefox	Opera	Safari
2.1	2	9	2