HTML5 Canvas - Tekst

Na obiekcie Canvas można "rysować" tekst. Służą do tego metody:

context.fillText(tekst,x,y);

Oznaczenia:

tekst - treść do wyświetlenia na płótnie;
x,y - współrzędne punktu, od którego zostanie narysowany tekst;

Mamy tu możliwość używania różnych stylów czcionek i ich rozmiarów dzięki metodzie context.font = "rozmiar styl".

Za kolor czcionki odpowiada metoda context.fillStyle = "kolor".

Za wyrównanie tekstu w poziomie odpowiada metoda context.textAlign = "left|center|right", a w pionie context.textBaseline = "top|hanging|middle|alphabetic|ideographic|bottom".

Metoda context.strokeText(tekst,x,y) odpowiada za wypełnienie zajmowanego obszaru przez tekst.

Poniżej przykład:

<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "50pt Calibri"; // styl tekstu
context.fillStyle = "gray"; // ustawienie koloru tekstu
context.fillText("JavaScript",15,100); // narysowanie tekstu
context.strokeText("JavaScript",15,160); // wyświetlenie tekstu
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>
Lupa





© medianauka.pl, 2018-06-29, A-3562



Udostępnij
©® Media Nauka 2008-2023 r.