Udostępnij za pośrednictwem

  • Artykuł

          

Kurs HTML5 - Canvas - Grafika  Udostępnij na: Facebook

Autor: Norbert Blandzi

Opublikowano: 2011-11-18

Canvas udostępnia wiele metod, które pozwalają na edycję i obróbkę grafiki. Po zaimportowaniu obrazka, możesz go dowolnie ciąć i skalować.

Przed wykonaniem powinieneś przeczytać samouczki:

Po wykonaniu zadań nauczysz się:

  • importować i rysować obrazek,
  • skalować obrazek,
  • kroić obrazek.

Implementacja

Efekt końcowy został przedstawiony na Rys. 1.

Rys. 1. Efekt końcowy.

Twoim zadaniem jest:

  • zaimportowanie obrazka i wyrysowanie go na elemencie canvas,
  • przeskalowanie zaimportowanej grafiki,
  • obcięcie zaimportowanej grafiki.

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>Grafika 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="800" height="300">
            Twoja przegądarka nie wspiera elementu canvas!
            Pobierz Internet Explorer 9 lub nowszą wersję! 
        </canvas>
    </body>
</html>

Import i wyrysowanie obrazka

Zaczynając importowanie obrazków warto wiedzieć, że źródłem grafiki do importu może być jedynie inny element canvas lub obiekt obrazu. Jeśli masz już odnośnik do obrazka, narysuj go, używając metodydrawImage(), którą możesz wywołać z różnymi parametrami:

  • drawImage(nazwa_obiektu, x, y),

gdzie:

—   nazwa_obiektu – nazwa obiektu przechowującego obrazek,

—   x,y – współrzędne lewego, górnego wierzchołka obrazka,

  • drawImage(nazwa_obiektu, x, y, w, h),

gdzie:

—   nazwa_obiektu – nazwa obiektu przechowującego obrazek,
—   x,y – współrzędne lewego, górnego wierzchołka obrazka,
—   w,h – szerokość i wysokość obrazka.

  • drawImage(nazwa_obiektu, sx, sy, sw, sh, dx, dy, dw, dh),

gdzie:

—   nazwa_obiektu – nazwa obiektu przechowującego obrazek,
—   sx, sy – współrzędne lewego, górnego wierzchołka obrazka źródłowego,
—   sw, sh – szerokość i wysokość źródłowego obrazka,
—   dx, dy - współrzędne lewego, górnego wierzchołka nowego obrazka,
—   dw, dh – szerokość i wysokość nowego obrazka.

Obiekt obrazka możesz utworzyć za pomocą następującego kodu:

var nazwa_obiektu = new Image();
 nazwa_obiektu.src = "adres_obrazka.jpg"
 image.onload = function () { context.drawImage(nazwa_obiektu, 0, 0); };

gdzie:

  • pierwsza linia odpowiedzialna jest za utworzenie nowego obiektu (metoda Image()) i przypisaniu mu nazwy "nazwa_obiektu",
  • druga linia odpowiedzialna jest za ustawienie adresu do obrazka (adres_obrazka.jpg), dzięki wykorzystaniu właściwości src wcześniej utworzonego obiektu,
  • trzecia linijka umożliwia wyświetlenie obrazka po jego pobraniu, brak image.onload spowoduje, że większość przeglądarek nie wyświetli poprawnie obrazka.
  1. W katalogu, w którym znajduje się plik index.html, zapisz obrazek z Rys. 2. jako wielblad.jpg.

Rys. 2. Grafika do zadania – wielblad.jpg.

  1. W pliku index.html ustaw kursor za znacznikiem z metodą getContext() i dodaj nową linię.
  2. Wpisz następujący kod:
var image = new Image();
image.src = "wielblad.jpg";
image.onload = function () { context.drawImage(image, 0, 0); };
  1. Zapisz plik index.html. Otwórz go w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 3.

Rys. 3. Obrazek w Canvas.

Skalowanie obrazka

Do zmiany rozmiaru obrazka, wykorzystaj drugą z metod drawImage, podanych powyżej:

drawImage(nazwa_obiektu, x, y, w, h).

Skalowanie obrazka rozpocznij od wstawienia go na stronę za pomocą znacznika <img>. Następnie pobierz jego id i wyświetl go na elemencie canvas, zmniejszonego do rozmiaru 100x100 pikseli.

  1. Ustaw kursor za znacznikiem body i dodaj nową linię.
  2. Wpisz następujący kod:
<img id="wielblad" src="wielblad.jpg" alt="Wielbłąd" />
  1. Następnie ustaw kursor za znacznikiem z metodą getContext() i dodaj nową linię.
  2. Wpisz następujący kod:
var iWielblad = document.getElementById("wielblad");
context.drawImage(iWielblad, 350, 0, 100, 100);
  1. Zapisz plik index.html. Otwórz go w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 4.

Rys. 4. Skalowanie grafiki w Canvas.

Krojenie grafiki

Do przycięcia grafiki korzystaj z trzeciej z zaprezentowanych metod drawImage():

drawImage(nazwa_obiektu, sx, sy, sw, sh, dx, dy, dw, dh).
  1. Ustaw kursor za znacznikiem z metodą getContext() i dodaj nową linię.
  2. Wpisz następujący kod:
context.drawImage(iWielblad, 215, 10, 50, 45, 500, 0, 250, 225);
  1. Zapisz plik index.html. Otwórz go w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 1.

Podsumowanie

W tym samouczku nauczyłeś się, jak wstawiać grafikę do elementu <canvas>, a także jak ją skalować oraz kroić.

W kolejnym samouczku nauczysz się, jak określać przezroczystość i cień w Canvas.

Zadanie

Aby sprawdzić swoje umiejętności, spróbuj narysować na elemencie canvas prosty obrazek, taki, jak na Rys. 5. Liczy się efekt skalowania, a nie obrazek, dlatego wykorzystaj dowolną grafikę, którą posiadasz.

Rys. 5. Zadanie – skalowanie w elemencie canvas.

Aby zobaczyć podpowiedzi i rozwiązanie zadania przełącz na widok klasyczny.

  • Największy kangur to obrazek w znaczniku img.
  • Następny pod względem wielkości kangur jest rysowany na elemencie canvas, a jego wymiary to 300 pixeli szerokości i 200 pixeli wysokości.
  • Kolejne dwa kangury są o 50 pixeli mniejsze od swojego poprzednika.
<!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');
            var vKangur = document.getElementById("kangur");   
            context.drawImage(vKangur, 0, 0, 300, 200);
            context.drawImage(vKangur, 300, 0, 250, 150);
            context.drawImage(vKangur, 550, 0, 150, 100);
            };
        </script>
    </head>
    <body onload="draw();">
        <img id="kangur" src="kangur.png" alt="Lew">
        <canvas id="image" width="800" height="600">
        Twoja przeglądarka nie wspiera elementu canvas! Pobierz Internet Explorer 9 lub nowszą wersję!
        </canvas>
    </body>
</html>