Tegning af rektangler via canvas i JavaScript
Kvadrater og rektangler behøver ikke nødvendigvis
at blive tegnet ved hjælp af kombinationer af moveTo,
lineTo - der er enklere metoder til dette.
Lad os se nærmere på dem.
Metoden strokeRect
Metoden strokeRect(x, y, bredde,
højde) tegner omridset af en rektangel
på et givet punkt. De første to parametre angiver
koordinaterne for punktet, hvor rektanglets øverste
venstre hjørne vil være placeret.
Lad os tegne en rektangel ved hjælp af
strokeRect (vi antager, at ctx
allerede er defineret):
<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, bredde, højde)
virker på samme måde som strokeRect,
men tegner en udfyldt rektangel.
Lad os se et eksempel:
<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
Den næste metode rect(x, y, bredde,
højde) tegner også en rektangel. Men
rektanglen bliver kun synlig, hvis
metoden stroke eller fill anvendes.
I det første tilfælde vil der være et omrids, og i det andet
- en udfyldt figur.
Lad os tegne et omrids ved hjælp af 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();
:
Og lad os nu tegne en udfyldt 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
Den næste metode clearRect(x, y,
bredde, højde) fungerer som en viskelæder,
der renser et rektangulært område og gør
indholdet helt gennemsigtigt.
Lad os tegne en lille firkant med fillRect
og viske en del af den ud 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);
:
