Kurs HTML5 – Canvas – Tekst
Autor: Norbert Blandzi
Opublikowano: 2011-11-24
Jednym z ważniejszych elementów jest wyświetlanie tekstu na stronach WWW. Element cavas również umożliwia dodawanie i formatowanie tekstu.
Przed wykonaniem zadań powinieneś przeczytać samouczki:
Po wykonaniu zadań nauczysz się:
- dodawać tekst do elementu canvas,
- formatować tekst w elemencie canvas.
Implementacja
Efekt końcowy został przedstawiony na Rys. 1.
Rys. 1. Efekt końcowy.
Twoim zadaniem jest:
- umieszczenie tekstu w Canvas,
- pomiar umieszczonego tekstu,
- zmiana standardowego rozmieszczenia tekstu względem punktu bazowego.
Przygotowanie strony
Przygotuj podstawowy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszy odcinek samouczka HTML i CSS: Pierwsza strona internetowa.
- W edytorze HTML utwórz nowy plik pod nazwą index.html i wklej do niego szkielet strony:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Tekst w Canvas</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('image1');
var context = canvas.getContext('2d');
}
</script>
</head>
<body onload="draw();">
<canvas id="image1" width="300" height="450">
Twoja przeglądarka nie wspiera elementu canvas!
Pobierz Internet Explorer 9 lub nowszą wersję!
</canvas>
</body>
</html>
Umieszczanie tekstu w Canvas
Do tworzenia podstawowych napisów wykorzystaj następujące metody:
- fillText("napis", x, y) – umieszcza napis o treści określonej jako pierwszy argument, rozpoczynając pisanie od punktu (x,y),
- fillStyle = "kolor" – określa kolor tekstu,
- strokeText("napis", x, y) – umieszcza obramowanie napisu o treści określonej w pierwszym argumencie w punkcie (x,y), wykorzystując strokeStyle,
- strokeStyle = "kolor" – określa kolor obramowania czcionki,
- font = "Xpt FontFamily" – określa wielkość i font. X jest wartością liczbową, określającą wielkość fontu, aFontFamily nazwą fontu np. "40pt Consolas".
- Ustaw kursor za znacznikiem z metodą getContext() i dodaj nową linię.
- Wpisz:
context.font = "30pt Times New Roman";
context.fillStyle = "blue";
context.fillText("Witaj", 10, 50);
context.font = "30pt Arial";
context.strokeStyle = "red";
context.strokeText("CANVAS", 110, 50);
- Zapisz plik index.html. Otwórz go w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 2.
Rys. 2. Umieszczenie prostego tekstu w elemencie canvas.
Pomiar narysowanego tekstu
Na pewno zauważyłeś w poprzednim przykładzie, że aby połączyć style – zastosować różne fonty, kolory, wielkości, należy ręcznie określać położenie kolejnych fragmentów tekstu. Jeśli chcesz zrobić to automatycznie, musisz wykorzystać metodę measureText. Umożliwia ona pomiar tekstu przy aktualnych ustawieniach:
- measureText("napis").width – zwracadługość napisu w pikselach przy aktualnych ustawieniach.
- Ustaw kursor za ostatnio dodanym kodem i dodaj nową linię.
- Wpisz:
context.font = "30pt Times New Roman";
context.fillStyle = "blue";
context.fillText("Yo", 10, 100);
var len = context.measureText("Yo").width;
context.font = "30pt Arial";
context.strokeStyle = "red";
context.strokeText("CANVAS", len + 20, 100);
- Zapisz plik index.html. Otwórz go w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 3.
Rys. 3. Pomiar tekstu w Canvas za pomocą metody measureText.
Wyrównanie tekstu
Tekst możesz umiejscowić dowolnie, względem punktu odniesienia. Do tego celu służą dwie metody:
- textAlign=[X] – określa wyrównanie tekstu w poziomie względem punktu (x,y). Wartość elementu X można ustawić na: "start", "end", "left", "right", "center" (domyślnie: "start"),
- textBaseline=[X]; – określa wyrównanie tekstu w pionie. Wartość elementu X można ustawić na: "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (domyślnie: "alphabetic").
- Ustaw kursor za ostatnio dodanym kodem i dodaj nową linię.
- Wpisz:
context.arc(100, 150, 2, 2 * Math.PI, 0, true);
context.textAlign = "left";
context.fillStyle = "blue";
context.fillText("left", 100, 150);
context.arc(100, 200, 2, 2 * Math.PI, 0, true);
context.textAlign = "right";
context.fillText("right", 100, 200);
context.arc(100, 250, 2, 2 * Math.PI, 0, true);
context.textAlign = "center";
context.fillText("center", 100, 250);
context.arc(100, 300, 2, 2 * Math.PI, 0, true);
context.textBaseline = "middle";
context.fillText("middle", 100, 300);
context.arc(100, 400, 2, 2 * Math.PI, 0, true);
context.textBaseline = "bottom";
context.fillText("bottom", 100, 400);
context.textBaseline = "top";
context.fillText("top", 100, 400);
context.fillStyle = "black";
context.fill();
- Zapisz plik index.html. Otwórz go w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 1.
Strona końcowa
Poniżej możesz zobaczyć końcowy kod strony HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Tekst w Canvas</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('image1');
var context = canvas.getContext('2d');
context.font = "30pt Times New Roman";
context.fillStyle = "blue";
context.fillText("Witaj", 10, 50);
context.font = "30pt Arial";
context.strokeStyle = "red";
context.strokeText("CANVAS", 110, 50);
context.font = "30pt Times New Roman";
context.fillStyle = "blue";
context.fillText("Yo", 10, 100);
var len = context.measureText("Yo").width;
context.font = "30pt Arial";
context.strokeStyle = "red";
context.strokeText("CANVAS", len + 20, 100);
context.arc(100, 150, 2, 2 * Math.PI, 0, true);
context.textAlign = "left";
context.fillStyle = "blue";
context.fillText("left", 100, 150);
context.arc(100, 200, 2, 2 * Math.PI, 0, true);
context.textAlign = "right";
context.fillText("right", 100, 200);
context.arc(100, 250, 2, 2 * Math.PI, 0, true);
context.textAlign = "center";
context.fillText("center", 100, 250);
context.arc(100, 300, 2, 2 * Math.PI, 0, true);
context.textBaseline = "middle";
context.fillText("middle", 100, 300);
context.arc(100, 400, 2, 2 * Math.PI, 0, true);
context.textBaseline = "bottom";
context.fillText("bottom", 100, 400);
context.textBaseline = "top";
context.fillText("top", 100, 400);
context.fillStyle = "black";
context.fill();
}
</script>
</head>
<body onload="draw();">
<canvas id="image1" width="300" height="450">
Twoja przeglądarka nie wspiera elementu canvas!
Pobierz Internet Explorer 9 lub nowszą wersję!
</canvas>
</body>
</html>
Podsumowanie
W tym artykule nauczyłeś się, jak dodawać i formatować tekst na elemencie canvas.
W kolejnym artykule nauczysz się, jak animować obiekty elementu canvas.
Zadanie
Aby sprawdzić swoje umiejętności, spróbuj narysować na elemencie canvas prosty obrazek, przedstawiony na Rys. 4.
Rys. 4. Zadanie – rotacja w elemencie canvas.
Aby zobaczyć podpowiedzi i rozwiązanie zadania przełącz na widok klasyczny.
- Wykorzystane typy metody globalCompositeOperation() to destination-over oraz xor.
- Szerokość kwadratu to 150 pixeli, a współrzędne ich prawych-górnych wierzchołków to (100,100) oraz (100,300).
- Napisy są rysowane na współrzędnych (50,150) oraz (50,350).
<!DOCTYPE html>
<html lang='pl'>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('image');
var context = canvas.getContext('2d');
context.globalCompositeOperation = "destination-over";
context.fillStyle = "blue";
context.fillRect(100,100,150,150);
context.fillStyle = "green";
context.font = "40pt Times New Roman";
context.fillText("Internet Explorer 9",50, 150);
context.globalCompositeOperation = "xor";
context.fillStyle = "blue";
context.font = "40pt Times New Roman";
context.fillRect(100,300,150,150);
context.fillStyle = "green";
context.fillText("Internet Explorer 9",50, 350);
};
</script>
</head>
<body onload="draw();">
<canvas id="image" width="800" height="600">
Twoja przeglądarka nie wspiera elementu canvas! Pobierz Internet Explorer 9 lub nowszą wersję!
</canvas>
</body>
</html>