View Categories

HTML Canvas

3 min read


Your browser does not support the element.

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>

Текст зурах #

Your browser does not support the canvas element
<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50); </script>
Your browser does not support the canvas element
<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World", 10, 50); </script

Шугаман градиент зурах #

Your browser does not support the canvas element
<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>

Дугуй градиент зурах #

Your browser does not support the canvas element
<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>

Powered by BetterDocs

Leave a Reply