HTML 5 CANVAS UVOD HTML 5 Canvas Canvas

HTML 5 Canvas • Canvas je oznaka (tag) HTML 5 standarda namijenjena crtanju. •

HTML 5 Canvas POČETAK RADA – „postavljanje platna za crtanje” <canvas id=“platno“ width=“ 300“

HTML 5 Canvas var ctx = document. get. Element. By. Id('platno'). get. Context('2 d');

Primjer za ilustraciju indeks. html <!DOCTYPE html> <html lang="hr"> <head> <meta charset="UTF-8" /> <title>HTML

Primjer za ilustraciju canvas. js function draw() { var canvas = document. get. Element.

HTML 5 Canvas CRTANJE Koordinatni sustav • Koordinatni sustav koji se koristi sa <canvas>

HTML 5 Canvas Kartezijev koordinatni sustav Koordinatni sustav CANVAS -a

HTML 5 Canvas Crtanje oblika • Canvas podržava samo jedan primitivni oblik – pravokutnik.

Primjer function draw() { var canvas = document. get. Element. By. Id('platno 2'); var

Zadatak za vježbu Pokušaj nacrtati sljedeću sliku Rješenje: function draw() { var canvas =

HTML 5 Canvas Staza • Pomoću funkcije begin. Path() započinje se nova staza, a

Primjer za ilustraciju – crtanje trokuta // ispunjeni trokut ctx. begin. Path(); ctx. move.

HTML 5 Canvas Linije (x, y) – metoda za crtanje ravne linije, x i

HTML 5 Canvas = type – postavlja vrstu spoja između segmenata staze, gdje type

Primjer ctx 2. begin. Path(); ctx 2. move. To(120, 180); ctx 2. line. Width

HTML 5 Canvas Lukovi • Za crtanje lukova, kružnica i krugova na raspolaganju je

Primjer ctx 2. begin. Path(); ctx 2. line. Width = 2; ctx 2. arc(180,

HTML 5 Canvas Boje • Dodavanje boje oblicima se postiže korištenjem fill. Style i

Primjer ctx 2. fill. Style = '#fc 7 b 03'; // boja ispune ctx

Primjer Canvas omogućava crtanje prozirnih (ili poluprozirnih) oblika i korištenjem svojstva global. Alpha. Korištenje

HTML 5 Canvas Gradijenti • HTML 5 Canvas omogućava ispunjavanje oblika linearnim i radijalnim

HTML 5 Canvas • Kreirani objekt se potom pridružuje svojstvima fill. Style i stroke.

HTML 5 Canvas „Crtanje” teksta • Canvas nudi dvije metode za rad s tekstom:

Slides: 25

Download presentation

HTML 5 CANVAS UVOD

HTML 5 Canvas • Canvas je oznaka (tag) HTML 5 standarda namijenjena crtanju. • Canvas element predstavlja spremnik za rastersku grafiku koja se generira upotrebom skripti (najčešće Java. Script). • Upotrebom Java. Script -a se može pristupiti čitavom setu funkcija za crtanje putanja, pravokutnika, lukova, crta, teksta … • Canvas API (API - Application Programming Interface - aplikacijsko programsko sučelje) osigurava alate za crtanje grafike putem Java. Script-a i HTML <canvas> elementa. • Canvas API je uglavnom namijenjen 2 D crtanju, iako postoji mogućnost rada i sa 3 D grafikom preko Web. GL API –ja.

HTML 5 Canvas POČETAK RADA – „postavljanje platna za crtanje” <canvas id=“platno“ width=“ 300“ height=“ 300“></canvas> • Ovime je u HTML datoteci definiran okvir ili „prazan papir“ unutar kojeg crtamo pomoću JS –a. • Canvas kontekst je objekt koji sadrži svojstva i metode koji se mogu koristiti za iscrtavanje grafike unutar HTML 5 <canvas> elementa. Svaki <canvas> element može imati najviše jedan kontekst. • <canvas> element ima DOM (Document Object Model) metodu get. Context() koja se koristi za dobivanje konteksta i funkcija za crtanje. get. Context() prima jedan parametar – tip konteksta, koji može biti 2 d ili 3 d.

HTML 5 Canvas var ctx = document. get. Element. By. Id('platno'). get. Context('2 d'); // pristup elementu putem njegovog id –a i njegovom kontekstu preko get. Context() metode.

Primjer za ilustraciju indeks. html <!DOCTYPE html> <html lang="hr"> <head> <meta charset="UTF-8" /> <title>HTML 5 Canvas</title> <link rel="stylesheet" type="text/css" href="canvas. css" /> <script type="text/javascript" src="canvas. js"></script> </head> <body onload="draw()"> <h 3>Primjer 1</h 3> <canvas id="platno 1" width="300" height="300"></canvas> </body> </html>

Primjer za ilustraciju canvas. js function draw() { var canvas = document. get. Element. By. Id('platno 1'); var ctx = canvas. get. Context('2 d'); // Primjer 1: iscrtavanje 2 preklapajuća pravokutnika ctx. fill. Style = 'rgb(200, 0, 0)'; ctx. fill. Rect(10, 50, 50); ctx. fill. Style = 'rgba(0, 0, 200, 0. 5)'; ctx. fill. Rect(30, 100, 100); } Funkcija draw() uzima canvas element i dobiva 2 d kontekst. Objekt ctx tada može biti korišten za ostvarivanje prikaza canvas -a. canvas. css canvas {border: 1 px dashed darkgray; }

Primjer za ilustraciju

HTML 5 Canvas CRTANJE Koordinatni sustav • Koordinatni sustav koji se koristi sa <canvas> elementom ima početnu (ishodišnu) točku u gornjem lijevom kutu canvas –a , koordinata (0, 0), sa X - koordinatom koja se prostire udesno i Y – koordinatom koja se pruža prema dolje do dna canvas –a- • Za razliku od standardnog (Kartezijevog) koordinatnog sustava canvas nema vidljivih negativnih točaka. Koordinatni sustav canvas –a je zapravo samo jedan kvadrant Kartezijevog sustava.

HTML 5 Canvas Kartezijev koordinatni sustav Koordinatni sustav CANVAS -a

HTML 5 Canvas Crtanje oblika • Canvas podržava samo jedan primitivni oblik – pravokutnik. • Svi ostali oblici se stvaraju kombiniranjem jedne ili više staza (paths). Pravokutnik • Za crtanje pravokutnika koristimo 3 funkcije: § fill. Rect (x, y, w, h) – crta ispunjeni pravokutnik (x, y, w, h) – crta samo obrub pravokutnika § clear. Rect (x, y, w, h) – briše specificirano pravokutno područje i čini ga prozirnim (transparentnim) § stroke. Rect x i y su koordinate gornje lijevog kuta pravokutnika, a w i h su širina i visina pravokutnika

Primjer function draw() { var canvas = document. get. Element. By. Id('platno 2'); var ctx = canvas. get. Context('2 d'); ctx. fill. Rect(10, 100, 100); // iscrtava ispunjeni kvadrat 100 x 100 ctx. clear. Rect(20, 80, 80); // briše specificirani kvadrat 80 x 80 ctx. stroke. Rect(10, 120, 50); // iscrtava kvadrat 50 x 50 }

Zadatak za vježbu Pokušaj nacrtati sljedeću sliku Rješenje: function draw() { var canvas = document. get. Element. By. Id('platno 3'); var ctx = canvas. get. Context('2 d'); ctx. fill. Rect(10, 50, 100); ctx. clear. Rect(30, 70, 60); ctx. stroke. Rect(110, 0, 50); ctx. fill. Rect(120, 10, 30); ctx. clear. Rect(130, 20, 10); }

HTML 5 Canvas Staza • Pomoću funkcije begin. Path() započinje se nova staza, a move. To, line. To, arc i slične metode koriste se za dodavanje segmenata stazi. • Staza se zatvara pozivom funkcije close. Path() koja zatvara oblik tako da crta ravnu liniju od trenutne pozicije do početne. Ako je oblik već zatvoren ili je samo jedna točka u listi, funkcija ne radi ništa. • Kada se oblik stvori, mogu se koristiti fill() i/ili stroke() za crtanje staze (oblika). stroke() se koristi za crtanje obruba, dok fill() crta puni oblik. Kada se poziva fill() metoda, staza će se automatski zatvoriti pa nije potrebno koristiti close. Path() metodu.

Primjer za ilustraciju – crtanje trokuta // ispunjeni trokut ctx. begin. Path(); ctx. move. To(10, 250); ctx. line. To(110, 250); ctx. line. To(80, 170); ctx. fill(); // trokut ctx. begin. Path(); ctx. move. To(10, 250); ctx. line. To(110, 250); ctx. line. To(80, 170); ctx. close. Path(); ctx. stroke(); move. To(x, y) – pomjera „olovku“ na novu poziciju koja se nalazi na koordinatama (x, y).

HTML 5 Canvas Linije (x, y) – metoda za crtanje ravne linije, x i y su koordinate krajnje točke linije. Početna točka se određuje metodom move. To ili je to krajnje točka prethodno nacrtanog segmenta staze. • line. To • Neka od često korištenih svojstava: § line. Width = vrijednost- postavlja širinu (debljinu) linija koje će biti crtane § line. Cap = type – postavlja vrstu završetka linije (type može imati sljedeće vrijednosti: butt, round ili square) but round square

HTML 5 Canvas = type – postavlja vrstu spoja između segmenata staze, gdje type može uzeti sljedeće vrijednosti: round, bevel, miter (podrazumijevana vrijednst) § line. Join round bevel miter

Primjer ctx 2. begin. Path(); ctx 2. move. To(120, 180); ctx 2. line. Width = 10; ctx 2. line. Join = 'round'; ctx 2. line. To(160, 160); ctx 2. line. To(200, 180); ctx 2. line. To(240, 160); ctx 2. line. To(280, 180); ctx 2. stroke(); ctx 2. close. Path();

HTML 5 Canvas Lukovi • Za crtanje lukova, kružnica i krugova na raspolaganju je arc metoda. arc(x, y, radius, start. Angle, end. Angle, anticlockwise) gdje su x i y – koordinate centra luka, odnosno kružnice, radius – polumjer (poluprečnik), start. Angle i end. Angle – definiraju početnu i završnu točku luka (kut koji zatvara) izraženo u radijanima, anticlockwise – parametar tipa boolean, ako je postavljen na true onda je smjer iscrtavanja luka obrnut od smjera kretanja kazaljke na satu. • Obzirom da se kutovi mjere u radijanima, ne stupnjevima, za preračunavanje stupnjeva u radijane može se koristiti seljedeći JS izraz: rad = (Math. PI/180) * stupnjevi;

Primjer ctx 2. begin. Path(); ctx 2. line. Width = 2; ctx 2. arc(180, 230, 25, 0, (Math. PI/180)*180, true); ctx 2. arc(230, 25, 0, (Math. PI/180)*180, false); ctx 2. fill(); ctx 2. begin. Path(); ctx 2. arc(170, 255, 20, 0, 2 * Math. PI, false); ctx 2. stroke(); ctx 2. close. Path(); ctx 2. begin. Path(); ctx 2. arc(170, 255, 10, 0, 2 * Math. PI, false); ctx 2. fill();

HTML 5 Canvas Boje • Dodavanje boje oblicima se postiže korištenjem fill. Style i stroke. Style svojstava. fill. Style = color - postavlja boju ispune oblika stroke. Style = color - postavlja boju obruba oblika, odnosno linije. • Podrazumijevana boja za oba svojstva je crna.

Primjer ctx 2. fill. Style = '#fc 7 b 03'; // boja ispune ctx 2. stroke. Style = 'rgb(252, 57, 3)'; // boja linije ctx 2. line. Width = 5; // debljina linije ctx 2. begin. Path(); ctx 2. arc(265, 272, 25, 0, 2 * Math. PI, false); ctx 2. fill(); ctx 2. stroke(); ctx 2. begin. Path(); ctx 2. fill. Style = 'rgba(110, 179, 224, 0. 7)'; // transparentna boja ctx 2. fill. Rect(250, 220, 30, 60);

Primjer Canvas omogućava crtanje prozirnih (ili poluprozirnih) oblika i korištenjem svojstva global. Alpha. Korištenje ovog svojstva se preporučuje kada je potrebno nacrtati više oblika iste transparencije. global. Alpha = vrijednost - gdje vrijednost može biti između 0 (potpuno prozirno i 1 (neprozirno, podrazumijevana vrijednost). ctx 2. fill. Style = '#fc 7 b 03'; // boja ispune ctx 2. stroke. Style = 'rgb(252, 57, 3)'; // boja linije ctx 2. line. Width = 5; // debljina linije ctx 2. begin. Path(); ctx 2. arc(265, 272, 25, 0, 2 * Math. PI, false); ctx 2. fill(); ctx 2. stroke(); ctx 2. begin. Path(); ctx 2. fill. Style = 'rgba(110, 179, 224, 0. 7)'; // transparentna boja ctx 2. fill. Rect(250, 220, 30, 60);

HTML 5 Canvas Gradijenti • HTML 5 Canvas omogućava ispunjavanje oblika linearnim i radijalnim gradijentima. Canvas. Gradient objekt generira se pomoću sljedećih metoda: § create. Linear. Gradient(x 1, y 1, x 2, y 2) - gdje su x 1 i y 1 koordinate početne, a x 2 i y 2 koordinate krajnje točke; § create. Radial. Gradient(x 1, y 1, r 1, x 2, y 2, r 2) - gdje parametri predstavljaju dva kruga, jedan sa središtem u točki (x 1, y 1) i polumjerom r 1, i drugi sa centrom u točki (x 2, y 2) i polumjerom r 2. • Nakon što je stvoren Canvas. Gradient objekt njemu se dodjeljuje boja pomoću metoda add. Color. Stop(). gradient. add. Color. Stop(pos, color) - gdje je pos broj između 0 i 1 i određuje relativni položaj boje u gradijentu, a color označava boju koju gradijent treba dostići pri tom pomaku.

HTML 5 Canvas • Kreirani objekt se potom pridružuje svojstvima fill. Style i stroke. Style. Primjer ctx 2. global. Alpha = 1; var lg = ctx 2. create. Linear. Gradient(0, 10, 300, 10); // kreiranje objekta lg. add. Color. Stop(0, 'rgb(0, 0, 0)'); lg. add. Color. Stop(0. 5, '#0000 FF'); lg. add. Color. Stop(1, 'white'); ctx 2. fill. Style = lg; // ctx 2. fill. Rect (5, 260, 300, 260);

HTML 5 Canvas „Crtanje” teksta • Canvas nudi dvije metode za rad s tekstom: fill. Text i Primjer ctx 2. font='bold 32 px Tafoma, sans-Serif'; ctx 2. fill. Text('2. d', 135, 25); ctx 2. font='22 px Impact, sans-Serif'; ctx 2. line. Width = 2; ctx 2. stroke. Text('web', 120, 45); ctx 2. font='26 px Mistral, sans-Serif'; ctx 2. fill. Style = 'red'; ctx 2. fill. Text('design', 155, 40); stroke. Text.