Rita HTML Canvas
- Föregående sida Canvas-introduktion
- Nästa sida Canvas-koordinater
Rita på canvas med JavaScript
Alla ritningar på HTML-kanven måste göras med JavaScript:
Exempel
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Steg 1: Hitta Canvas-elementet
Först måste du hitta <canvas>-elementet.
Detta görs genom att använda HTML DOM-metoden getElementById():
const canvas = document.getElementById("myCanvas");
Steg 2: Skapa ritobjektet
För det andra behöver du ett ritobjekt för canvasen.
getContext() är en inbyggd HTML-objekt som tillhandahåller egenskaper och metoder för ritning:
const ctx = canvas.getContext("2d");
Steg 3: Rita på canvasen
Slutligen kan du rita på canvasen.
Sätt fyllfärgen för ritobjektet till röd:
ctx.fillStyle = "#FF0000";
fillStyle egenskapen kan vara CSS-färg, gradient eller mönster. Standardvärdet för fillStyle är svart.
fillRect(x,y,width,height) metoden ritas en rektangel på canvas med fyllfärgen:
ctx.fillRect(0, 0, 150, 75);
Se också:
- Föregående sida Canvas-introduktion
- Nästa sida Canvas-koordinater
