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

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)

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)

Næste side

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.