HTML -canvasafbeeldingen
Het HTML <canvas>-element wordt gebruikt om afbeeldingen op een webpagina te tekenen.
De afbeelding aan de linkerkant is gemaakt met <canvas>. Het toont vier elementen: een rode rechthoek, een gradiëntrechthoek, een veelkleurige rechthoek en een veelkleurige tekst.
Wat is HTML Canvas?
Het HTML <canvas>-element wordt gebruikt om afbeeldingen, on-the-fly, via JavaScript te tekenen.
Het <canvas>element is slechts een container voor afbeeldingen. U moet JavaScript gebruiken om de afbeeldingen daadwerkelijk te tekenen.
Canvas heeft verschillende methoden om paden, vakken, cirkels, tekst te tekenen en afbeeldingen toe te voegen.
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die het
<canvas>element volledig ondersteunt.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Canvasvoorbeelden
Een canvas is een rechthoekig gebied op een HTML-pagina. Standaard heeft een canvas geen rand en geen inhoud.
De opmaak ziet er als volgt uit:
<canvas id="myCanvas" width="200" height="100"></canvas>
Opmerking: geef altijd een idattribuut op (waarnaar in een script moet worden verwezen) en een attribuut widthen heightom de grootte van het canvas te definiëren. Gebruik het styleattribuut om een rand toe te voegen.
Hier is een voorbeeld van een eenvoudig, leeg canvas:
Voorbeeld
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Voeg een JavaScript toe
Nadat u het rechthoekige canvasgebied hebt gemaakt, moet u een JavaScript toevoegen om de tekening te maken.
Hier zijn enkele voorbeelden:
Teken een lijn
Voorbeeld
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
Teken een cirkel
Voorbeeld
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
Teken een tekst
Voorbeeld
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
Beroerte tekst
Voorbeeld
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
Lineair verloop tekenen
Voorbeeld
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Cirkelvormig verloop tekenen
Voorbeeld
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Afbeelding tekenen
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
HTML Canvas-zelfstudie
<canvas>Lees onze HTML Canvas-zelfstudie voor meer informatie .