Tekst HTML Canvas
Rysowanie tekstu na płótnie
Najważniejszymi właściwościami i metodami rysowania tekstu na płótnie są:
- czcionka - określa właściwości czcionki tekstu
- fillText( text,x,y ) - rysuje "wypełniony" tekst na płótnie
- strokeText( text,x,y ) - rysuje tekst na kanwie (bez wypełnienia)
Korzystanie z funkcji fillText()
Przykład
Ustaw czcionkę na 30px "Arial" i napisz na płótnie wypełniony tekst:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Korzystanie z strokeText()
Przykład
Ustaw czcionkę na 30px "Arial" i napisz na płótnie tekst bez wypełnienia:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Dodaj kolor i środkowy tekst
Przykład
Ustaw czcionkę na 30px „Comic Sans MS” i wpisz wypełniony czerwony tekst na środku 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);