Udostępnij za pośrednictwem

  • Artykuł

          

Kurs HTML5 – Canvas – Tekst Udostępnij na: Facebook

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.

  1. 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".
  1. Ustaw kursor za znacznikiem z metodą getContext() i dodaj nową linię.
  2. 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);
  1. 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.
  1. Ustaw kursor za ostatnio dodanym kodem i dodaj nową linię.
  2. 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);
  1. 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").
  1. Ustaw kursor za ostatnio dodanym kodem i dodaj nową linię.
  2. 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();
  1. 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>