HTML Canvas tegning

Tegn på canvas med JavaScript

Alle tegninger på HTML-canvas må utføres med JavaScript:

Eksempel

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>

Prøv det selv

Trinn 1: Finn Canvas-elementet

Først må du finne <canvas>-elementet.

Dette gjøres ved å bruke HTML DOM-metoden getElementById():

const canvas = document.getElementById("myCanvas");

Trinn 2: Opprett tegneobjekt

Dernest trenger du et tegneobjekt for canvas.

getContext() er en innebygd HTML-objekt som gir tilgang til egenskaper og metoder for tegning:

const ctx = canvas.getContext("2d");

Trinn 3: Tegn på canvas

Til slutt kan du tegne på canvas.

Sett fyllingsstilen for tegneobjektet til rød:

ctx.fillStyle = "#FF0000";

fillStyle-egenskapen kan være en CSS-farge, en gradient eller et mønster. Standard fillStyle er svart.

fillRect(x,y,width,height) metoden tegner en rektangel på canvas, og fylder med en fyllingsmal:

ctx.fillRect(0, 0, 150, 75);

Se også:

CodeW3C.com's fulde Canvas reference håndbog