Ուղղանկյունների նկարում canvas-ի միջոցով JavaScript-ում
Քառակուսիները և ուղղանկյունները պարտադիր չէ
նկարել moveTo և
lineTo համադրություններով - դրա համար կան ավելի պարզ մեթոդներ:
Եկեք դիտարկենք դրանք:
strokeRect մեթոդը
strokeRect(x, y, լայնություն,
բարձրություն) մեթոդը նշված կետում նկարում է
ուղղանկյան ուրվագիծը: Առաջին երկու պարամետրերը սահմանում են
այն կետի կոորդինատները, որտեղ կգտնվի նկարված ուղղանկյունի վերևի
ձախ անկյունը:
Եկեք նկարենք ուղղանկյուն օգտագործելով
strokeRect (ենթադրենք, որ ctx-ն
արդեն առկա է).
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 100, 75);
:
fillRect մեթոդը
fillRect(x, y, լայնություն, բարձրություն)
մեթոդը աշխատում է նույն կերպ, ինչ strokeRect-ը,
միայն թե նկարում է լցված ուղղանկյուն:
Տեսնենք օրինակով.
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 75);
:
rect մեթոդը
Հաջորդ rect(x, y, լայնություն,
բարձրություն) մեթոդը նույնպես նկարում է ուղղանկյուն: Սակայն
այս ուղղանկյունը տեսանելի կդառնա միայն այն դեպքում,
եթե կիրառվի stroke կամ fill մեթոդը:
Առաջին դեպքում կստացվի ուրվագիծ, իսկ երկրորդում
- լցված պատկեր:
Եկեք նկարենք ուրվագիծ օգտագործելով rect.
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.stroke();
:
Իսկ հիմա նկարենք լցված պատկեր.
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.fill();
:
clearRect մեթոդը
Հաջորդ clearRect(x, y,
լայնություն, բարձրություն) մեթոդը աշխատում է ինչպես ռետին,
մաքրելով ուղղանկյուն տարածքը և դարձնելով
պարունակությունը լրիվ թափանցիկ:
Եկեք նկարենք քառակուսի օգտագործելով fillRect
և մաքրենք դրա մի մասը օգտագործելով clearRect.
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
:
