HTML <canvas> элементийг вэб хуудсанд график зураг зурахад ашигладаг.
Зүүн талын графикийг <canvas> ашиглан бүтээсэн болно. Энэ нь улаан тэгш өнцөгт, градиент тэгш өнцөгт, олон өнгийн тэгш өнцөгт, олон өнгийн текст гэсэн дөрвөн элементийг харуулдаг.
What is HTML Canvas? #
HTML <canvas> элементийг JavaScript-ээр дамжуулан шууд график зурахад ашигладаг.
<canvas> элемент бол зөвхөн график дүрс хийх зориулалттай сав юм. График зурахын тулд та JavaScript ашиглах ёстой.
Canvas нь зам, хайрцаган дүрс, дугуй дүрс, текст зурах, зураг нэмэх хэд хэдэн аргатай байдаг.
Хөтөчийн дэмжлэг #
Хүснэгтэд байгаа тоонууд нь <canvas> элементийг бүрэн дэмждэг хөтөчийн анхны хувилбарыг зааж өгдөг.
| Элемент | chrome | internet explorer | mozila firefox | safari | opera |
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
<canvas id="myCanvas" width="200" height="100"></canvas>
Canvas Жишээнүүд #
Canvas бол HTML хуудсан дээрх тэгш өнцөгт талбай юм. Үндсэн canvas нь гадуур хүрээ байхгүй, агуулгагүй байдаг.
Тэмдэглэгээ дараах байдалтай байна:
<canvas id="myCanvas" width="200" height="100"></canvas>
Санамж: Үргэлж id шинж чанараар тодорхойл (скриптэд дурдах болно), мөн canvas-ийн хэмжээг тодорхойлохын тулд width ба height шинж чанарыг ашиглана. Хүрээг нэмэхийн тулд style шинж чанарыг ашиглана уу.
Үндсэн, хоосон canvas-ийн жишээг энд оруулав.
Example #
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas> JavaScript нэмэх #
Тэгш өнцөгт canvas-ийн талбайг үүсгэсний дараа зурахдаа JavaScript нэмэх шаардлагатай.
Зарим жишээг энд оруулав.
Мөр зурах #
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script> Тойрог зурах #
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script> Текст зурах #
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script> <script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script Шугаман градиент зурах #
<script>
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);
</script> Дугуй градиент зурах #
<script>
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);
</script> Зураг зурах #
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script> 
