HTML -doekgrafika
Die HTML <canvas>-element word gebruik om grafika op 'n webblad te teken.
Die grafika aan die linkerkant is geskep met <canvas>. Dit wys vier elemente: 'n rooi reghoek, 'n gradiëntreghoek, 'n veelkleurige reghoek en 'n veelkleurige teks.
Wat is HTML Canvas?
Die HTML <canvas>-element word gebruik om grafika, op die vlieg, via JavaScript te teken.
Die <canvas>element is slegs 'n houer vir grafika. Jy moet JavaScript gebruik om die grafika werklik te teken.
Canvas het verskeie metodes om paaie, bokse, sirkels, teks te teken en beelde by te voeg.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die
<canvas>element ten volle ondersteun.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Canvas Voorbeelde
'n Skilderdoek is 'n reghoekige area op 'n HTML-bladsy. By verstek het 'n skilderdoek geen rand en geen inhoud nie.
Die opmaak lyk soos volg:
<canvas id="myCanvas" width="200" height="100"></canvas>
Let wel: Spesifiseer altyd 'n idkenmerk (waarna verwys moet word in 'n skrif), en 'n widthen heightkenmerk om die grootte van die skilderdoek te definieer. Om 'n grens by te voeg, gebruik die stylekenmerk.
Hier is 'n voorbeeld van 'n basiese, leë doek:
Voorbeeld
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Voeg 'n JavaScript by
Nadat u die reghoekige doekarea geskep het, moet u 'n JavaScript byvoeg om die tekening te doen.
Hier is 'n paar voorbeelde:
Trek 'n lyn
Voorbeeld
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
Trek 'n sirkel
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 'n teks
Voorbeeld
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
Beroerte teks
Voorbeeld
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
Teken lineêre gradiënt
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>
Teken sirkelvormige gradiënt
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>
Teken prent
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
HTML Canvas Tutoriaal
Om meer te wete te kom oor <canvas>, lees asseblief ons HTML Canvas Tutoriaal .