Rita rektanglar via canvas i JavaScript

Kvadrater och rektanglar behöver nödvändigtvis inte ritas med kombinationer av moveTo, lineTo - det finns enklare metoder för detta. Låt oss gå igenom dem.

Metoden strokeRect

Metoden strokeRect(x, y, bredd, höjd) ritar konturen av en rektangel på en given punkt. De två första parametrarna anger koordinaterna för punkten där rektangelns övre vänstra hörn kommer att vara.

Låt oss rita en rektangel med strokeRect (vi antar att ctx redan finns):

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

Результат:

Metoden fillRect

Metoden fillRect(x, y, bredd, höjd) fungerar på samma sätt som strokeRect, men ritar en ifylld rektangel. Låt oss titta på ett exempel:

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

Результат:

Metoden rect

Nästa metod rect(x, y, bredd, höjd) ritar också en rektangel. Men denna rektangel blir bara synlig om metoden stroke eller fill tillämpas. I det första fallet blir det en kontur, och i det andra - en ifylld figur.

Låt oss rita en kontur med 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();

Результат:

Och nu ritar vi en ifylld figur:

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

Результат:

Metoden clearRect

Nästa metod clearRect(x, y, bredd, höjd) fungerar som ett suddgummi, och rensar ett rektangulärt område och gör innehållet helt genomskinligt.

Låt oss rita en liten kvadrat med fillRect och sudda bort en del av den med 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);

Результат: