Samouczek HTML5: rysuj tekst na płótnie za pomocą fantazyjnych kolorów, gradientów i efektów

Zawartość

• Podstawy rysowania tekstu w HTML5
• Rysowanie tekstu z cieniem na płótnie HTML5
• Rysowanie tekstu za pomocą gradientu na kanwie HTML5
• Obracanie tekstu na płótnie HTML5
• Więcej sposobów korzystania z HTML5

Simeon Visser jest pisarzem, który lubi zajmować się takimi tematami, jak technologia i podróże.

W tym samouczku omówię różne efekty, których możesz użyć podczas rysowania tekstu na płótnie HTML5. Niektóre z nich przypominają Ci dobrze znane efekty WordArt z programu Microsoft Word! Ten samouczek opiera się na mój drugi tutorial na temat podstaw rysowania na płótnie HTML5. W tym poprzednim artykule wyjaśniono znaczenie kodu HTML5 i omówiono inne podstawy kanwy HTML5, takie jak układ współrzędnych.

W HTML5 możesz nadać swojemu tekstowi fantazyjny wygląd, dodając cień, kolorowy gradient i obracając tekst. Będziemy ćwiczyć każdy z tych efektów, a jeśli połączysz je, będzie wyglądał bardzo ładnie.

Zacznijmy od podstawowej, pustej strony internetowej HTML5:

! DOCTYPE html> html> head> meta http-equiv = "Content-type" content = "text / html; charset = UTF-8"> title> Samouczek HTML5: Rysowanie tekstu z fantazyjnymi kolorami i efektami / title> / head> body> canvas id = "mycanvas" width = "300" height = "300"> / canvas> script type = "text / javascript"> var canvas = document.getElementById ('mycanvas'); var ctx = canvas.getContext ('2d'); / script> / body> / html>

Podstawy rysowania tekstu w HTML5

Możesz narysować tekst w określonym miejscu na płótnie, używając funkcji strokeText lub fillText. Podobnie jak rysowanie kształtów, strokeText rysuje tylko kontur tekstu, a fillText również koloruje wnętrze tekstu. Te polecenia przyjmują trzy argumenty: sam tekst, współrzędną x miejsca, w którym ma zostać narysowany tekst i współrzędną y. Na początek współrzędne to mniej więcej lewy dolny róg ramki otaczającej główną część tekstu. Możesz go zobaczyć jako punkt początkowy linii, w której rysowane są znaki tekstowe. Omawianie tego byłoby tematem samym w sobie i wykracza to poza zakres tego samouczka.

Możemy określić czcionkę za pomocą atrybutu czcionki kontekstu:

ctx.font = "pogrubiony bezszeryfowy 36 pikseli";

To jest tekstowy opis czcionki, której należy użyć do narysowania tekstu. Możesz określić styl (pogrubienie / kursywa), rozmiar (36 pikseli) oraz nazwę czcionki lub rodziny czcionek (w tym przypadku rodzina czcionek bezszeryfowa). Możesz określić czcionkę według nazwy (np. Arial), ale możesz także określić rodzinę czcionek, która jest grupą czcionek. Komputer, na którym wyświetlana jest strona internetowa, decyduje, która z tej rodziny czcionek będzie. Użytkownicy mogą zmienić stosowaną czcionkę za pomocą ustawień swojej przeglądarki internetowej.

Na przykład czcionka bezszeryfowa reprezentuje rodzinę czcionek bez szeryfów. Spróbuj zmienić ją na szeryfową lub stałą, aby zobaczyć, jaką czcionkę otrzymasz!

ctx.font = "pogrubiony bezszeryfowy 36 pikseli"; ctx.fillText ("HubPages", 10, 100);

Powyższe określa czcionkę i wypełnia tekst „HubPages” w lokalizacji (10, 100). Dobrze, teraz mamy tam trochę tekstu, ale to jeszcze nic nadzwyczajnego: to tylko czarny tekst! Jak każdy inny kształt, możesz zmienić fillStyle, aby zmienić kolor tekstu. Umieszczenie następującego wiersza przed poleceniem fillText da ci czerwony tekst:

ctx.fillStyle = "rgb (255, 0, 0)";

Rysowanie tekstu z cieniem na płótnie HTML5

Dodanie cienia to łatwy sposób na nadanie tekstowi nieco bardziej fantazyjnego wyglądu. Musisz określić kolor cienia i wskazać, gdzie powinien znajdować się cień względem tekstu (lub jakikolwiek inny kształt, ponieważ poniższe działa dla wszystkiego, co rysujesz na płótnie HTML5).

Zmodyfikuj swój kod tak, aby wyglądał następująco:

ctx.font = "pogrubiony bezszeryfowy 36 pikseli"; ctx.shadowColor = "rgb (190, 190, 190)"; ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillText ("HubPages", 10, 100);

Jak widać, mamy shadowColor, shadowOffsetX i shadowOffsetY. ShadowColor jest szary, ale możesz też użyć innego koloru. ShadowOffsetX i shadowOffsetY odsuwają cień spod tekstu. Gdybyś zostawił ich oboje na 0, światło padałoby z góry i nie widziałbyś cienia. Te wartości przesunięcia (wartość 10 zarówno dla x, jak i y) oznaczają, że cień jest przesuwany w prawo iw dół o 10 kroków wzdłuż obu osi współrzędnych (niekoniecznie pikseli).

ctx.font = "pogrubiony bezszeryfowy 36 pikseli"; ctx.shadowColor = "rgb (190, 190, 190)"; ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.shadowBlur = 10; ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillText ("HubPages", 10, 100);

To miły początek: mamy kolorowy tekst i cień. Ale możemy zrobić więcej. Przedstawmy gradienty - mogą one naprawdę zmienić Twoje teksty ze zwykłych na fantazyjne!

Rysowanie tekstu za pomocą gradientu na kanwie HTML5

Zamiast wypełniać teksty jednym kolorem, możesz wypełnić je wieloma kolorami. Nazywa się to gradientem, w którym jeden kolor przechodzi stopniowo w następny. Zamierzamy użyć gradientu liniowego, który dokładnie to robi: określamy dwa kolory, a wszystkie kolory pomiędzy nimi są obliczane automatycznie. Daje to ładnie kolorowy tekst.

Dodamy gradient od czerwonego do żółtego. Po prostu zamień linię na fillStyle na:

var gradient = ctx.createLinearGradient (0, 0, 150, 100); gradient.addColorStop (0, "rgb (255, 0, 0)"); gradient.addColorStop (1, "rgb (255, 255, 0)"); ctx.fillStyle = gradient;

FillStyle jest teraz gradientem zamiast kolorem. Tworzymy gradient, wywołując metodę createLinearGradient w kontekście rysunku. Musisz podać dwa punkty, a pomiędzy tymi punktami zostanie zastosowany gradient. Używamy punktu początkowego (0, 0) i punktu końcowego (150, 100).

Następnie określamy kolory za pomocą addColorStop. Pierwszy argument mówi nam, jak daleko kolor znajduje się od punktu początkowego. Jest to wartość od 0 do 1, gdzie 0 oznacza punkt początkowy, a 1 oznacza punkt końcowy. Tak więc wartość 0 oznacza kolor, który określasz dla punktu początkowego, wartość 0,5 oznacza w połowie odległości między obiema podanymi współrzędnymi, a 1 oznacza punkt końcowy. Punktowi początkowemu nadajemy kolor czerwony, a punktowi końcowemu kolor żółty. Używamy dwóch kolorów dla naszego gradientu, ale jeśli chcesz, możesz użyć więcej niż dwóch.

Zauważ, że te współrzędne są niezależne od twojego tekstu i jeśli zdecydujesz się zmienić lokalizację tekstu, prawdopodobnie będzie on wyglądał inaczej, ponieważ wtedy wyszuka informacje o kolorze w tym miejscu. Kiedy używasz gradientu dla fillStyle, zmieniasz kolory dla wszystkich poleceń wypełnienia (fillText, fillRect itp.), Więc musisz trochę pobawić się współrzędnymi gradientu i tekstem, jeśli nie wygląda to w odpowiedni sposób chcesz tego.

Teraz naprawdę zaczyna wyglądać fantazyjnie. Mamy jeszcze jedną sztuczkę w rękawie, a mianowicie używanie transformacji do obracania tekstu.

Obracanie tekstu na płótnie HTML5

Aby obrócić tekst, po prostu dodaj polecenie obracania. Argumentem jest kąt obrotu w prawo w radianach, więc użyj wartości ujemnej, aby obrócić przeciwnie do ruchu wskazówek zegara:

ctx.rotate (-0,25);

Mamy teraz nasz ostateczny wynik: fantazyjny tekst z gradientem, cieniem i odrobiną obrotu!

Więcej sposobów korzystania z HTML5

• Samouczek HTML5: Rysowanie okręgów i łuków
  Rysowanie okręgów i łuków w HTML5 może być nie lada wyzwaniem. W tym samouczku wyjaśniam, jak rysować okręgi i łuki oraz jak mierzone są kąty łuków. Ten samouczek zawiera wiele przykładów.

Ten artykuł jest dokładny i zgodny z najlepszą wiedzą autora. Treści służą wyłącznie do celów informacyjnych lub rozrywkowych i nie zastępują osobistych porad ani profesjonalnych porad w kwestiach biznesowych, finansowych, prawnych lub technicznych.