HTML- doekteks
Tekenteks op die doek
Om teks op 'n doek te teken, is die belangrikste eienskap en metodes:
- font - definieer die font eienskappe vir die teks
- fillText( text,x,y ) - teken "gevulde" teks op die doek
- strokeText( text,x,y ) - teken teks op die doek (geen vul)
Gebruik fillText()
Voorbeeld
Stel lettertipe op 30px "Arial" en skryf 'n gevulde teks op die doek:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Gebruik strokeText()
Voorbeeld
Stel lettertipe op 30px "Arial" en skryf 'n teks, sonder vulling, op die doek:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Voeg kleur en middelteks by
Voorbeeld
Stel lettertipe op 30px "Comic Sans MS" en skryf 'n gevulde rooi teks in die middel van die doek:
JavaScript:
var
canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);