Хаткашии хатҳо тавассути canvas дар JavaScript

Оғоз мекунем аз содда - аз хат кашидан. Барои фаҳмидани чӣ гуна ин кор анҷом дода мешавад, тасаввар кунед, ки шумо коғаз ва қалам доред. Шумо метавонед рӯйи ин коғаз кашед, ё ин ки метавонед бе кашидан танҳо қаламро ба нуқтаи дархостшуда ҳаракат диҳед.

Ҳамин тавр JavaScript низ кор мекунад: он қалам дорад (ё қалами хаткашӣ), ба ҷойи дархостшуда шумо метавонед онро бо ёрии методи moveTo ҳаракат диҳед, ва кашед - бо ёрии методи lineTo.

Ҳарду метод параметрҳо ҳамчун нуқтае, ба он ки нӯги қалам ҳаракат кунад - қабул мекунанд. Параметри якум координата аз рӯи уфуқӣ, параметри дуюм - аз рӯи амудӣ. Оғози координатаҳо - нуқтаи 0, 0 - ин кунҷи болу чапи элемент аст.

Вақте ки қалам ба нуқтаи дархостшуда ҳаракат мекунад - методи moveTo танҳо ҳаракат медиҳад, ва lineTo дар раванди ҳаракат хат кашида аз мавқеи ҷории қалам то нуқта, ки он ба он ҷо ҳаракат мекунад.

Аммо, агар рамзи дар боло овардашуда иҷро шавад - ҳеҷ чиз рӯй надодад: бояд ду амр навишта шавад: амри якум beginPath пеш аз оғози хат кашидан бояд зикр шавад, ва амри дуюм stroke бояд пас аз ҳама комбинатсияҳои moveTo ва lineTo барои он ки хат кашида шавад, даъват карда шавад.

Пас, биёед рамзи корӣ барои хат кашидан нависем:

Хат кашем

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();

Результат:

Парранда кашем

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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();

Результат:

Секунҷа кашем

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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();

Результат:

Чоркунҷа кашем

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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 - дар ин ҳолат шакл заруран нест ки пурра пӯшида бошад - он рангин мешавад ва ин тавр:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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();

Результат:

Масъалаҳои амалӣ