Tegning av rektangler via canvas i JavaScript
Kvadrater og rektangler trenger du ikke nødvendigvis
å tegne ved hjelp av kombinasjoner av moveTo,
lineTo - det finnes enklere metoder for dette.
La oss se på dem.
Metoden strokeRect
Metoden strokeRect(x, y, bredde,
høyde) tegner omrisset av et rektangel
på et gitt punkt. De to første parameterne angir
koordinatene til punktet der øverste venstre
hjørne av det tegnede rektangelet vil være.
La oss tegne et rektangel med
strokeRect (antar at ctx
allerede finnes):
<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øyde)
fungerer på samme måte som strokeRect,
men tegner et fylt rektangel.
La oss se på 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 neste metoden rect(x, y, bredde,
høyde) tegner også et rektangel. Men
dette rektangelet blir bare synlig
hvis du bruker metoden stroke eller fill.
I det første tilfellet blir det en omrisslinje, og i det andre
- en fylt figur.
La oss tegne en omrisslinje 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();
:
Og nå tegner vi en fylt 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 neste metoden clearRect(x, y,
bredde, høyde) fungerer som et viskelær,
og tørker et rektangulært område og gjør
innholdet helt gjennomsiktig.
La oss tegne en liten firkant med fillRect
og viske 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);
:
