HTML / Canvas үндэс

Canvas үндэс

<canvas> элемент нь JavaScript ашиглан браузерийн дотор зураг зурах, хөдөлгөөнт дүрс (animation) гаргах боломж олгодог. Тоглоом, өгөгдлийн визуализаци, зургийн редактор зэргийг canvas ашиглан бүтээдэг.

Canvas элемент

html
<!-- width, height attribute заавал бичнэ — CSS-ээр тохируулбал зураг гажина -->
<canvas id="миний-canvas" width="600" height="400">
  Таны хөтөч canvas дэмждэггүй байна.
</canvas>

Canvas нь дотроо width × height пикселийн цагаан дэвсгэртэй хоосон зурагзурах талбар. Элементийг HTML-д тодорхойлсны дараа бүх зурах ажил JavaScript-ээр явагдана.

getContext — зурах контекст авах

javascript
const canvas = document.getElementById("миний-canvas");

// 2D зурах контекст авна — энэ нь бидний ашиглах хэрэгсэл
const ctx = canvas.getContext("2d");

getContext("2d") нь CanvasRenderingContext2D объект буцаадаг бөгөөд бүх зурах арга (method) үүнд байдаг. "webgl" параметр өгвөл 3D боломжтой боловч хамаагүй нарийн.

Тэгш өнцөгт зурах — fillRect, strokeRect

javascript
const canvas = document.getElementById("миний-canvas");
const ctx = canvas.getContext("2d");

// Дүүргэсэн тэгш өнцөгт: fillRect(x, y, өргөн, өндөр)
ctx.fillStyle = "#f87171";          // дүүргэлтийн өнгө
ctx.fillRect(50, 50, 200, 100);     // x=50, y=50-с эхлэн 200×100

// Хүрээтэй тэгш өнцөгт: strokeRect(x, y, өргөн, өндөр)
ctx.strokeStyle = "#4ade80";        // хүрээний өнгө
ctx.lineWidth = 3;                  // хүрээний зузаан
ctx.strokeRect(300, 50, 200, 100);

// Нэг хэсгийг арилгах: clearRect(x, y, өргөн, өндөр)
ctx.clearRect(100, 75, 50, 50);     // тэгш өнцөгт дотроос нүх гарна

Canvas-ийн координатын эхлэл (0, 0) нь зүүн дээд буланд байдаг. X баруун тийш, Y доош нэмэгдэнэ.

Тойрог зурах — arc

javascript
// arc(x, y, радиус, эхлэх_өнцөг, дуусах_өнцөг)
// Өнцгийг радианаар заана: 2π = бүтэн тойрог

ctx.beginPath();                    // шинэ замын эхлэл
ctx.arc(200, 200, 80, 0, Math.PI * 2);  // бүтэн тойрог
ctx.fillStyle = "#60a5fa";
ctx.fill();

// Хагас тойрог
ctx.beginPath();
ctx.arc(450, 200, 60, 0, Math.PI); // 0-с π хүртэл = доод хагас
ctx.strokeStyle = "#fbbf24";
ctx.lineWidth = 4;
ctx.stroke();

Текст бичих — fillText, strokeText

javascript
// Фонт тохируулна
ctx.font = "bold 32px Arial";
ctx.fillStyle = "#f1f5f9";

// fillText(текст, x, y) — y нь текстийн суурийн шугам
ctx.fillText("Сайн уу, Canvas!", 50, 100);

// Текстийн хэмжээ авах
const хэмжэ = ctx.measureText("Сайн уу, Canvas!");
console.log(хэмжэ.width); // пикселийн өргөн

// Хүрээтэй текст
ctx.strokeStyle = "#f87171";
ctx.lineWidth = 1;
ctx.strokeText("Ulaanbaatar.app", 50, 150);

Шугам зурах — moveTo, lineTo

javascript
ctx.beginPath();
ctx.moveTo(50, 300);        // эхлэх цэг (үзэг өргөх)
ctx.lineTo(250, 100);       // шугам зурах
ctx.lineTo(450, 300);       // үргэлжлүүлэх
ctx.closePath();            // эхлэх цэг рүү буцаж хаана (гурвалжин)

ctx.strokeStyle = "#a78bfa";
ctx.lineWidth = 3;
ctx.stroke();               // шугамыг харуулна

// Дүүргэх
ctx.fillStyle = "rgba(167, 139, 250, 0.3)";
ctx.fill();

Бүтэн жишээ — энгийн зурагзурах

html
<!DOCTYPE html>
<html lang="mn">
  <head>
    <meta charset="UTF-8" />
    <title>Canvas жишээ</title>
  </head>
  <body>
    <canvas id="зурагзурах" width="500" height="400"
      style="border: 1px solid #1e293b; background: #0f172a;"
    ></canvas>

    <script>
      const canvas = document.getElementById("зурагзурах");
      const ctx = canvas.getContext("2d");

      // Нар — шар тойрог
      ctx.beginPath();
      ctx.arc(250, 80, 50, 0, Math.PI * 2);
      ctx.fillStyle = "#fbbf24";
      ctx.fill();

      // Газар — ногоон тэгш өнцөгт
      ctx.fillStyle = "#4ade80";
      ctx.fillRect(0, 320, 500, 80);

      // Байшин — хөх тэгш өнцөгт
      ctx.fillStyle = "#60a5fa";
      ctx.fillRect(150, 220, 200, 100);

      // Дээвэр — гурвалжин
      ctx.beginPath();
      ctx.moveTo(120, 220);
      ctx.lineTo(250, 120);
      ctx.lineTo(380, 220);
      ctx.closePath();
      ctx.fillStyle = "#f87171";
      ctx.fill();

      // Гарчиг
      ctx.font = "bold 20px Arial";
      ctx.fillStyle = "#f1f5f9";
      ctx.fillText("Canvas зурагзурах", 140, 390);
    </script>
  </body>
</html>

Canvas хэзээ ашиглах вэ?

Canvas нь пиксел-д суурилсан зурагзурах учир дараах тохиолдолд тохиромжтой: тоглоом (game loop), өгөгдлийн chart (боловч <svg> ч ашиглаж болно), зургийн боловсруулалт, гэрэл, тусгал зэрэг нарийн дүрс. Энгийн дүрс болон icon-д SVG илүү тохиромжтой — дараагийн хичээлд үзнэ.

Дараагийн хичээлд:

SVG үндсийг судлана — вектор зураг яагаад canvas-аас ялгаатай, icon болон дүрс бүтээхэд SVG хэрхэн ашигладаг талаар үзнэ.

← Өмнөх хичээлНарийн input төрлүүдДараах хичээл →SVG үндэс