Rysowanie tekstu na płótnie
Aby narysować tekst na płótnie, najważniejszą własność i są następujące metody:
- font - określa właściwości czcionki dla tekstu
- fillText( text,x,y ) - zwraca "filled" tekst na płótnie
- strokeText( text,x,y ) - zwraca tekst na płótnie (no fill)
Korzystanie fillText()
Przykład
Ustawianie czcionki na 30px "Arial" i napisać pełen tekst na płótnie:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); Spróbuj sam " Korzystanie strokeText()
Przykład
Ustawianie czcionki na 30px "Arial" i napisać tekst, bez wypełnienia, na płótnie:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); Spróbuj sam " Dodaj Kolor i wyśrodkować tekst
Przykład
Ustawianie czcionki na 30px "Comic Sans MS" i napisać wypełniony czerwony tekst w centrum płótna:
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);
Spróbuj sam "