Ուղղանկյունների նկարում canvas-ի միջոցով JavaScript-ում

Քառակուսիները և ուղղանկյունները պարտադիր չէ նկարել moveTo և lineTo համադրություններով - դրա համար կան ավելի պարզ մեթոդներ: Եկեք դիտարկենք դրանք:

strokeRect մեթոդը

strokeRect(x, y, լայնություն, բարձրություն) մեթոդը նշված կետում նկարում է ուղղանկյան ուրվագիծը: Առաջին երկու պարամետրերը սահմանում են այն կետի կոորդինատները, որտեղ կգտնվի նկարված ուղղանկյունի վերևի ձախ անկյունը:

Եկեք նկարենք ուղղանկյուն օգտագործելով strokeRect (ենթադրենք, որ ctx-ն արդեն առկա է).

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

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

ctx.strokeRect(50, 50, 100, 75);

Результат:

fillRect մեթոդը

fillRect(x, y, լայնություն, բարձրություն) մեթոդը աշխատում է նույն կերպ, ինչ strokeRect-ը, միայն թե նկարում է լցված ուղղանկյուն: Տեսնենք օրինակով.

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

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

ctx.fillRect(50, 50, 100, 75);

Результат:

rect մեթոդը

Հաջորդ rect(x, y, լայնություն, բարձրություն) մեթոդը նույնպես նկարում է ուղղանկյուն: Սակայն այս ուղղանկյունը տեսանելի կդառնա միայն այն դեպքում, եթե կիրառվի stroke կամ fill մեթոդը: Առաջին դեպքում կստացվի ուրվագիծ, իսկ երկրորդում - լցված պատկեր:

Եկեք նկարենք ուրվագիծ օգտագործելով rect.

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

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

ctx.rect(50, 50, 100, 75);
ctx.stroke();

Результат:

Իսկ հիմա նկարենք լցված պատկեր.

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

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

ctx.rect(50, 50, 100, 75);
ctx.fill();

Результат:

clearRect մեթոդը

Հաջորդ clearRect(x, y, լայնություն, բարձրություն) մեթոդը աշխատում է ինչպես ռետին, մաքրելով ուղղանկյուն տարածքը և դարձնելով պարունակությունը լրիվ թափանցիկ:

Եկեք նկարենք քառակուսի օգտագործելով fillRect և մաքրենք դրա մի մասը օգտագործելով clearRect.

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

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

ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);

Результат: