<canvas> Forberedelser før vi tegner - JavaScript

Lær at skrive den indledende kode før der tegnes på <canvas> med JavaScript

Før vi tegner

Først laver vi et <canvas> med width og height i den ønskede bredde og højde.
En id attribut (så vi let kan finde canvaset i JavaScript).
En CSS ramme (så vi let kan se hvor canvaset er også selvom der ikke er tegnet noget).
En fallback tekst mellem <canvas> og </canvas> som vises i browsere der ikke understøtter <canvas>.

Herefter bruges JavaScript.

Med document.getElementById('test') kan vi finde elementet med dets id værdi.

Med if (canvas.getContext) { } sikre vi os at koden kun bliver udført i de browsere der understøtter det, så man undgår eventuelle fejlbeskeder i ældre browsere.

Med getContext('2d') vælger vi de tegnefunktioner vi skal bruge til at tegne firkanter, cirkler, tekst, billeder, vælge farve og mere til.

Herefter kan context variablen bruges når der skal tegnes på canvaset.

Her ses resultatet som er et gennemsigtigt canvas på 400 x 300 pixels med en CSS ramme.

Canvaset er gennemsigtig (usynligt) fordi vi endnu ikke har tegnet noget.

Browseren understøtter ikke <canvas>

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.