Хаткашии хатҳо тавассути canvas дар JavaScript
Оғоз мекунем аз содда - аз хат кашидан. Барои фаҳмидани чӣ гуна ин кор анҷом дода мешавад, тасаввар кунед, ки шумо коғаз ва қалам доред. Шумо метавонед рӯйи ин коғаз кашед, ё ин ки метавонед бе кашидан танҳо қаламро ба нуқтаи дархостшуда ҳаракат диҳед.
Ҳамин тавр JavaScript низ кор мекунад: он қалам дорад
(ё қалами хаткашӣ), ба ҷойи дархостшуда шумо метавонед онро бо ёрии
методи moveTo ҳаракат диҳед,
ва кашед - бо ёрии
методи lineTo.
Ҳарду метод параметрҳо ҳамчун нуқтае, ба
он ки нӯги қалам ҳаракат кунад - қабул мекунанд. Параметри якум
координата аз рӯи уфуқӣ, параметри дуюм - аз
рӯи амудӣ. Оғози координатаҳо - нуқтаи 0,
0 - ин кунҷи болу чапи элемент аст.
Вақте ки қалам ба нуқтаи дархостшуда ҳаракат мекунад -
методи moveTo танҳо ҳаракат медиҳад, ва
lineTo дар раванди ҳаракат хат кашида
аз мавқеи ҷории қалам то нуқта,
ки он ба он ҷо ҳаракат мекунад.
Аммо, агар рамзи дар боло овардашуда иҷро шавад
- ҳеҷ чиз рӯй надодад: бояд ду амр навишта шавад: амри якум beginPath
пеш аз оғози хат кашидан бояд зикр шавад,
ва амри дуюм stroke бояд
пас аз ҳама комбинатсияҳои moveTo
ва lineTo барои он ки хат кашида шавад, даъват карда шавад.
Пас, биёед рамзи корӣ барои хат кашидан нависем:
Хат кашем
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Парранда кашем
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Секунҷа кашем
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
Чоркунҷа кашем
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
Пӯшидани шаклҳо
Барои кашидани шакли пӯшида зарур нест
ҳамаи хатҳоро кашед - хати охирин метавонад
худкор кашида шавад ва шаклро бипӯшад.
Барои ин пеш аз методи stroke бояд
методи closePath даъват карда шавад.
Ин метод кӯшиш мекунад, ки шаклро бипӯшад, бо кашидани хати рост аз нуқтаи поёнӣ ба нуқтаи оғозӣ. Агар шакл аллакай пӯшида шуда бошад ё танҳо нуқта бошад, он ҳеҷ чиз намекунад.
Биёед секунҷа кашем, бо истифода аз closePath:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - ин қадамро ҳазв мекунем
ctx.closePath();
ctx.stroke();
:
Рангин кардани шаклҳо
Ба ҷои методи stroke метавон истифода кард
методи fill - дар ин ҳолат шакл заруран нест
ки пурра пӯшида бошад - он рангин мешавад
ва ин тавр:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - ин қадамро ҳазв мекунем
//ctx.closePath(); - ва инро ҳам
ctx.fill();
:
