Kolorowe prostokąty

Lekcja marzec 2018

W trakcie tej lekcji nauczysz się: Definiować element canvas. Rysować kolorowe prostokąty. Publikować efekty swojej pracy.

URL:

http://canvas-2d.blogspot.com/2018/03/canvas.html

Autor:

Radosław Kowaluk

Copyright © 2018 Obowiązują zasady odpowiedzialności karnej, znaków towarowych i zasad W3C.

---

Wykład

Canvas 2d jest częścią szeroko pojętej technologii HTML5 (rekomendowany w 2015 roku). Zawartość "graficzna" elementu canvas jest definiowana za pomocą języka JavaScript (dokładnie ECMAScript i rozszerzenia Canvas 2d).

Element canvas i script

Domyślnie element canvas tworzy przezroczysty obraz PNG, o wymiarach 300 x 150 (pikseli). Układ współrzędnych jest taki jak w każdej grafice.
Zanalizujmy aktywnie przykłady.

Domyślny element canvas.
<canvas></canvas>
Przetestuj przykład zmieniając kod w lewym prostokącie.

W przykładzie dodano pomocnicze obramowanie elementu canvas za pomocą atrybutu style i reguły CSS border . Zawartością może być tekst alternatywny, który zostanie wyświetlony jeżeli przeglądarka nie będzie mogła zaprezentować elementu canvas .

Na początku skryptu obowiązkowo deklarujemy zmienną (var nazwa_zmiennej) i za pomocą metody getContext("2d") przypisujemy jej wartość (operator przypisania =). Wielkość liter ma znaczenie. Nazwy zmiennych muszą zaczynać się od litery, znaków $ i _.

W przykładzie dodano metodę getContext("2d") w elemencie script.
<canvas id="c1"></canvas> <script> var c = c1.getContext("2d") </script>
Zmień nazwę zmiennej.

Element script może posiadać atrybut type z wartością "text/javascript", który w HTML 5 można pominąć, . Popularnym sposobem odwołania się do elementu canvas o identyfikatorze id="c1" jest metoda obiektu document document.getElementById("c1"), którą będziemy pomijać, . Poszczególne linie kodu możemy zakończyć średnikiem ;.

Innym sposobem jest zapisanie kodu w osobnym pliku (z rozszerzeniem .js) i określenie jego adresu w atrybucie src.
Podsumowując, możemy przyjąć następujące definicje.

canvas

Element HTML, zawierający opcjonalny alternatywny tekst i tworzący obraz, którego zawartość jest zdefiniowana skryptem. Może być definiowany z atrybutami width i height.

script

Element HTML, zawierający kod skryptu lub określenie pliku z kodem. Może być definiowany z atrybutami src i type.

var nazwa_zmiennej [= wartość]

Instrukcja ECMAScript, poprzedza definiowaną zmienną (lub zmienne oddzielone przecinkami). Deklaracja może zawierać przypisanie wartości

=

Operator ECMAScript, przypisuje argumentowi z lewej strony wartość z prawej strony.

Prostokąt, styl wypełnienia i kolor

Obiekt

Typ danych.

Metoda

Funkcja obiektu.

Własność

Cecha obiektu.

fillRect(x,y,a,b)

Metoda obiektu canvas rysuje wypełniony prostokąt o współrzędnych (x,y), szerokości a i wysokości b. Liczby mogą być ujemne.

fillStyle = "kolor"

Własność obiektu canvas definiuje styl wypełnienia barwą kolor, którą określamy jak w CSS np. nazwą, funkcją rgb(), liczbą szesnastkową.

fillStyle = kolor = red silver
fillRect( x = , y = , a = , b = )

Figury, które nie zmieszczą się w Canvas zostaną wykadrowane. Pojęcia szerokość i wysokość pozostają w konflikcie z geometrią.

Po zdefiniowaniu zmiennej kontekstu mamy dostęp do metod i własności. Oddzielamy ich nazwy od zmiennej za pomocą kropki . (bez spacji).

W przykładzie dodano prostokąt za pomocą metody fillRect().
<canvas id="c1"></canvas> <script> var c = c1.getContext("2d") c.fillRect(20,10,200,100) </script>
Zmień argumenty metody fillRect().

Domyślnym stylem wypełnienia jest kolor czarny. Możemy zdefiniować własny za pomocą własności fillStyle. Odpowiedni kod wpisujemy przed fragmentem określającym prostokąt.

W przykładzie dodano styl wypełnienia za pomocą własności fillStyle.
<canvas id="c1"></canvas> <script> var c = c1.getContext("2d") c.fillStyle="silver" c.fillRect(20,10,200,100) </script>
Zmień kolor korzystając z Planszy interaktywnej Kolor w CSS

Domyślny rozmiar obrazu możemy zmieć definiując atrybuty width i height (odpowiednio szerokość i wysokość elementu canvas).

W przykładzie dodano atrybuty width i height.
<canvas id="c1" width="300" height="200"></canvas> <script> var c = c1.getContext("2d") c.fillStyle="rgb(255,255,255)" c.fillRect(0,0,300,200) c.fillStyle="silver" c.fillRect(20,10,200,100) </script>
Pierwszy prostokąt, o wymiarach elementu canvas definiuje tło obrazu. Zmień wielkość elementu canvas, dopasuj rozmiar tła.

Napisany kod możemy opublikować na stronie internetowej lub blogu. W pierwszym przypadku kod umieszczamy w elemencie body w odpowiednim miejscu strony. W przypadku bloga korzystamy z edytora i trybu HTML.
Innym sposobem publikacji jest skopiowanie grafiki i stawienie pliku w formacie PNG. Niestety jesteśmy wtedy ograniczeni do grafiki statycznej.

W przykładzie dodano element canvas w kodzie strony internetowej.
<!DOCTYPE html> <html> <head> <title>Kolorowe prostokąty</title> </head> <body> <canvas id="c1" width="377" height="233"></canvas> <script> var c = c1.getContext("2d") c.fillStyle="silver" c.fillRect(0,0,377,233) c.fillStyle="rgb(255,0,0)" c.fillRect(10,10,233,144) c.fillStyle="rgb(0,255,0)" c.fillRect(243,10,89,144) c.fillStyle="rgb(0,0,255)" c.fillRect(243,154,89,55) c.fillStyle="rgb(0,255,255)" c.fillRect(209,154,34,55) c.fillStyle="rgb(255,0,255)" c.fillRect(209,133,34,21) c.fillStyle="rgb(255,255,0)" c.fillRect(243,133,13,21) c.fillStyle="rgb(255,255,255)" c.fillRect(243,154,13,8) c.fillStyle="rgb(0,0,0)" c.fillRect(238,154,5,8) </script> </body> </html>
Zmień kod przykładu.

Wartości liczbowe mogą być ułamkami. Separatorem dziesiętnym jest kropka.

W przykładzie dodano styl wypełnienia za pomocą funkcji rgba(), której ostatni argument oznacza stopień przezroczystości.
<!DOCTYPE html> <html lang="pl"> <head> <title>Kolorowe prostokąty</title> <meta charset="utf-8" /> <style> #c1 { border: 1px solid silver; } </style> </head> <body> <canvas id="c1" width="233" height="144"></canvas> <script> var c = c1.getContext("2d") var a = 70 c.fillStyle="rgb(255,255,255)" c.fillRect(0,0,233,144) c.fillStyle="rgba(255,0,0,0.5)" c.fillRect(10,10,a,a) c.fillStyle="rgba(0,255,0,0.5)" c.fillRect(40,10,a,a) c.fillStyle="rgba(0,0,255,0.5)" c.fillRect(25,40,a,a) </script> </body> </html>
Zmień kolory, stopień przezroczystości, wielkość kwadratów.

Ćwiczenia

1. Wykonaj 5 pierwszych lekcji z kursu Kodujący Stwór (Zaczynamy, Zmienne, Kolor, Kolor i przeźroczystość, Quiz: Prostokąt, zmienne i kolory).

Zadania

1. Utwórz stronę internetową zawierającą obraz canvas o dowolnym rozmiarze, zawierający tło i kompozycję kolorowych prostokątów. Użyj różnych sposobów zapisu koloru i przezroczystości.

Inspiracja

<style> * { margin: 0px; padding: 0px; overflow: hidden; } </style> <canvas id="canvasOne" width="987px" height="476px"></canvas> <script> var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); var displayWidth = theCanvas.width; var displayHeight = theCanvas.height; init(); function init() { context.fillStyle="rgb(245,245,245)" context.fillRect(0,0,displayWidth,displayHeight) generate(); theCanvas.addEventListener("click", clickListener, false); } function clickListener(evt) { context.fillStyle="rgb(245,245,245)" context.fillRect(0,0,displayWidth,displayHeight) generate(); if (evt.preventDefault) { evt.preventDefault(); } else if (evt.returnValue) { evt.returnValue = false; } return false; } function setLinePoints(iterations) { var pointList = {}; pointList.first = {x:0, y:1}; var lastPoint = {x:1, y:1} var minY = 1; var maxY = 1; var point; var nextPoint; var dx, newX, newY; pointList.first.next = lastPoint; for (var i = 0; i < iterations; i++) { point = pointList.first; while (point.next != null) { nextPoint = point.next; dx = nextPoint.x - point.x; newX = 0.5*(point.x + nextPoint.x); newY = 0.5*(point.y + nextPoint.y); newY += dx*(Math.random()*2 - 1); var newPoint = {x:newX, y:newY}; if (newY < minY) { minY = newY; } else if (newY > maxY) { maxY = newY; } newPoint.next = nextPoint; point.next = newPoint; point = nextPoint; } } if (maxY != minY) { var normalizeRate = 1/(maxY - minY); point = pointList.first; while (point != null) { point.y = normalizeRate*(point.y - minY); point = point.next; } } else { point = pointList.first; while (point != null) { point.y = 1; point = point.next; } } return pointList; } function generate() { var centerX, centerY; var r,g,b,a; var color; var lineW; var maxRad, minRad; for (var i = 0; i < 40; i++) { maxRad = 50+Math.random()*50;; minRad = 0.88*maxRad; centerX = maxRad + Math.random()*(displayWidth-3*maxRad); centerY = maxRad + Math.random()*(displayHeight-3*maxRad); r = Math.floor(Math.random()*255); g = Math.floor(Math.random()*255); b = Math.floor(Math.random()*255); a = 0.4; color = "rgba("+r+","+g+","+b+","+a+")"; context.fillStyle=color context.fillRect(centerX, centerY,minRad, maxRad) } } </script>
Kliknij obraz aby wygenerować ponownie (Źródło: opracowanie własne)