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):
<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);
:
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:
<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);
:
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:
<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();
:
Och nu ritar vi en ifylld figur:
<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();
:
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:
<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);
:
