Zeichnung Text auf der Leinwand
Um Text auf einer Leinwand, die wichtigste Eigenschaft und Methoden ziehen sind:
- font - definiert die Schrifteigenschaften für den Text
- fillText( text,x,y ) - zeichnet "filled" Text auf der Leinwand
- strokeText( text,x,y ) - zeichnet Text auf der Leinwand (no fill)
Mit fillText()
Beispiel
Stellen Sie Schriftart auf 30px "Arial" und einen gefüllten Text auf der Leinwand zu schreiben:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); Versuch es selber " Mit strokeText()
Beispiel
Stellen Sie Schriftart auf 30px "Arial" und einen Text zu schreiben, ohne Füllung, auf der Leinwand:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); Versuch es selber " In Farbe und Text zentrieren
Beispiel
Font einstellen "Comic Sans MS" auf 30px und einen gefüllten roten Text in der Mitte der Leinwand zu schreiben:
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);
Versuch es selber "