HTML- doektekening
Teken op die doek met JavaScript
Alle tekeninge op die HTML-doek moet met JavaScript gedoen word:
Voorbeeld
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Stap 1: Vind die Canvas Element
Eerstens moet jy die <canvas>-element vind.
Dit word gedoen deur die HTML DOM-metode getElementById():
var canvas = document.getElementById("myCanvas");
Stap 2: Skep 'n Tekenvoorwerp
Tweedens benodig jy 'n tekenvoorwerp vir die doek.
Die getContext() is 'n ingeboude HTML-voorwerp, met eienskappe en metodes om te teken:
var ctx = canvas.getContext("2d");
Stap 3: Teken op die doek
Uiteindelik kan u op die doek teken.
Stel die vulstyl van die tekenvoorwerp na die kleur rooi:
ctx.fillStyle = "#FF0000";
Die fillStyle-eienskap kan 'n CSS-kleur, 'n gradiënt of 'n patroon wees. Die verstek fillStyle is swart.
Die fillRect( x,y,width,height ) metode teken 'n reghoek, gevul met die vulstyl, op die doek:
ctx.fillRect(0, 0, 150, 75);