<canvas> Firkanter - JavaScript

Tegn firkanter på <canvas> med JavaScript strokeRect(), fillRect(), clearRect()

Introduktion

2d context API indeholder 3 måder at tegne firkanter på.

strokeRect(x, y, bredde, højde) laver en firkantet ramme. Farven vælges med strokeStyle.

fillRect(x, y, bredde, højde) laver en udfyldt firkant. Farven vælges med fillStyle.

clearRect(x, y, bredde, højde) rydder et firkantet område så det bliver gennemsigtigt.

Farvelæg hele canvas

I dette eksempel vises hvordan man tegner en firkant på hele canvas.
Altså at tegne en baggrundsfarve.

Først vælges den ønskede farve med fillStyle.

Herefter tegnes en udfyldt firkant med fillRect(x, y, bredde, højde).

Ved at bruge canvas1.width som bredde og canvas1.height som højde kan vi tegne en firkant der har samme størrelse som canvaset.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

DEMO
(PÅ EN SIDE FOR SIG SELV)

EKSPERIMENTER MED KODEN PÅ JSBIN

Forskellige firkanter

Her vises de 3 forskellige måder man kan tegne firkanter på.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

DEMO
(PÅ EN SIDE FOR SIG SELV)

EKSPERIMENTER MED KODEN PÅ JSBIN

Fill og stroke

Her bruges fillRect() og strokeRect() til at tegne en firkant med ramme.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

DEMO
(PÅ EN SIDE FOR SIG SELV)

EKSPERIMENTER MED KODEN PÅ JSBIN
Siden er sidst opdateret mandag 25. juni 2018