HTML- canvastekst
Tekst tekenen op het canvas
Om tekst op een canvas te tekenen, zijn de belangrijkste eigenschappen en methoden:
- lettertype - definieert de lettertype-eigenschappen voor de tekst
- fillText( text,x,y ) - tekent "gevulde" tekst op het canvas
- strokeText( text,x,y ) - tekent tekst op het canvas (geen vulling)
FillText() gebruiken
Voorbeeld
Stel het lettertype in op 30px "Arial" en schrijf een gevulde tekst op het canvas:
javascript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
StrokeText() gebruiken
Voorbeeld
Stel het lettertype in op 30px "Arial" en schrijf een tekst, zonder vulling, op het canvas:
javascript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Kleur toevoegen en tekst centreren
Voorbeeld
Stel het lettertype in op 30px "Comic Sans MS" en schrijf een gevulde rode tekst in het midden van het canvas:
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);