Назария

Ҳолст ва шаклҳо

Ҳолст — расм аз пикселҳо

Барои бозиҳо дар браузер элементи <canvas> ҳаст — росткунҷаи пикселҳо, ки дар он аз JavaScript расм мекашанд. Баръакси элементҳои оддии саҳифа, дар ҳолст «объектҳо» нестанд: росткунҷа кашидед — ва ин танҳо пикселҳои рангкардашуда аст. Барои ҳаракат додани чизе кадрро пок мекунанд ва аз нав мекашанд. Қариб ҳамаи бозиҳои 2D маҳз ҳамин тавр кор мекунанд.

<canvas id="game" width="400" height="300"></canvas>

Андозаи ҳолстро бо атрибутҳои width ва height медиҳанд — ин андоза дар пикселҳо аст. (Агар ҳолстро бо CSS кашол диҳед, расм танҳо миқёс мешавад ва хира мегардад.)

Контексти расмкашӣ

На дар худи элемент, балки тавассути контексти он расм мекашанд — объекте бо ҳамаи фармонҳои расмкашӣ:

const canvas = document.querySelector("#game");
const ctx = canvas.getContext("2d");

ctx — номи кӯтоҳ ва умумиқабул. Минбаъд ҳамаи фармонҳо аз он даъват мешаванд.

Координатаҳо

Ибтидои координатаҳо (0, 0) — кунҷи чапи болоии ҳолст. x ба рост меафзояд, y — ба поён (на ба боло, мисли математикаи мактабӣ!). Пиксели рости поёнии ҳолсти 400×300 — (399, 299).

(0,0) ──────────► x
  │
  │      • (100, 50)
  ▼
  y

Росткунҷаҳо ва ранг

ctx.fillStyle = "orange";           // ранги пуркунӣ барои шаклҳои оянда
ctx.fillRect(20, 30, 120, 80);      // x, y, паҳно, баландӣ — пуррангшуда

ctx.strokeStyle = "#1e88e5";        // ранги хатҳо
ctx.lineWidth = 4;                  // ғафсии хатҳо
ctx.strokeRect(200, 30, 120, 80);   // танҳо чорчӯба

ctx.clearRect(0, 0, canvas.width, canvas.height);   // ҳамаро пок кардан (пикселҳои шаффоф)

Рангро мисли CSS додан мумкин аст: ном "red", "#ff0000", "rgb(255, 0, 0)", бо шаффофӣ "rgba(0, 0, 0, 0.5)". fillStyle ба ҳамаи шаклҳои минбаъда таъсир мекунад, то онро иваз накунанд — фаромӯш кардед рангро иваз кунед, ва ҳама чиз бо ранги пешина кашида мешавад.

Хатҳо ва роҳҳо

Шаклҳои мураккабро бо роҳ (path) мекашанд: роҳро сар мекунанд, «қалам»-ро мебаранд, баъд гирдогирд мекашанд ё пур мекунанд:

ctx.beginPath();
ctx.moveTo(50, 250);     // қаламро гузоштан, бе кашидан
ctx.lineTo(150, 150);    // хат кашидан
ctx.lineTo(250, 250);
ctx.closePath();         // ба аввал пайваст кардан — секунҷа шуд
ctx.fillStyle = "green";
ctx.fill();              // пур кардан
ctx.stroke();            // ва гирдогирд кашидан

beginPath() муҳим аст: бе он шакли нав ба роҳи кӯҳна «мечаспад», ва ҳангоми fill() ҳама чиз якбора аз нав ранг мешавад.

Доираҳо

Доира — ин камони arc(x, y, радиус, кунҷиИбтидоӣ, кунҷиНиҳоӣ) аст. Кунҷҳо дар радианҳо: доираи пурра — Math.PI * 2.

ctx.beginPath();
ctx.arc(300, 200, 40, 0, Math.PI * 2);
ctx.fillStyle = "gold";
ctx.fill();

Дар доира x, y — ин марказ аст, дар росткунҷа бошад — кунҷи чапи болоӣ. Ин дар бархӯрдҳо бисёр ошуфтагӣ меорад, баъдтар ба он бармегардем.

Матн

ctx.font = "24px sans-serif";
ctx.fillStyle = "black";
ctx.fillText("Хол: 120", 10, 30);     // x, y — канори чапи хати асосии матн
ctx.textAlign = "center";             // акнун x — миёнаи матн
ctx.fillText("GAME OVER", canvas.width / 2, 150);

Тартиб муҳим аст

Ҳолст мисли коғаз аст: он чи баъдтар кашида шудааст, кашидашудаи пештараро мепӯшонад. Бинобар ин ҳар кадри бозиро аз дур ба наздик мекашанд: замина → объектҳо → интерфейс (хол, ҷонҳо).

Санҷиши ранги пиксел

Ранги пикселро тавассути getImageData фаҳмидан мумкин аст: он массиви [сурх, сабз, кабуд, шаффофӣ]-ро бармегардонад, ҳар кадом аз 0 то 255. Масъалаҳои ин курс ҳамин тавр санҷида мешаванд:

const [r, g, b, a] = ctx.getImageData(100, 70, 1, 1).data;
console.log(r, g, b, a);   // 255 0 0 255 — сурхи ношаффоф

Пиксели шаффоф (ҳанӯз ранг накардашуда) — 0 0 0 0.

Хулоса

canvas.getContext("2d") — контекст бо фармонҳои расмкашӣ.
(0, 0) — кунҷи чапи болоӣ, y ба поён меафзояд.
fillStyle + fillRect, strokeStyle + strokeRect, clearRect — пок кардан.
Роҳҳо: beginPath → moveTo / lineTo / arc → fill / stroke.
Он чи баъдтар кашида шуд, дар боло мехобад; кадри бозӣ — пок кардан ва ҳамаро аз нав кашидан.