HTML5: Canvas Grafika

Trang chủ » Html Css Grafika » HTML5: Canvas Grafika

Có thể bạn quan tâm

Tamás Ferenc: Weblapkészítés HTML alapokon – 12. rész HTML5: Canvas grafika

 

26.1. fejezet: HTML5 Canvas bevezetés

A <canvas> elem segítségével lehet grafikai elemeket használni a weblapokon. Például a következő 4 kis téglalap is ezt jelképezi:

Canvas minta

Maga a <canvas> elem grafikai elemek menet közbeni tervezésére használható – JavaScript segítségével. A <canvas> tag csupán egy nagyobb tartály, amiben JavaScript segítésével lehet grafikai elemeket illeszteni. A <canvas> számos eljárást nyújt útvonalak, dobozok, körök, szövegek és egyéb grafikai elemek kivitelezésére.

A nagyon régi böngészők nem támogatják még ezt az eljárást, de a mostaniak kivétel nélkül már megjelenítik.

Elsőként lássunk egy egyszerű példát: jelenítsünk meg egy sima téglalapot a HTML lapon!

<canvas id="myCanvas" width="200" height="100"></canvas>

Futtatáskor észrevehetjük, hogy semmi se jelenik meg. Magának a <canvas> elemnek nincsen sem határoló vastagsága, sem határoló színe. A láthatóságért inkább használjuk a következő kódot: (htmlpelda60.html)

<html>

 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

</html>

És az eredmény:

Canvas téglalap

Paraméterek magyarázata:

- id: mindenképpen szükséges, mivel a majdan beépülő script használja hivatkozásnak.

- width: szélesség

- height: magasság

- style: vonal jellemzői (1 képpont vastag, sima vonal, fekete színben)

Felmerülhet kérdésként, hogy miért célszerű használni a <canvas> elemet a jól megszokott képek (pl.: JPG) helyett. Nos, a legegyszerűbb válasz erre: a méret! Ugyanis a fenti kis kód 108 bájt, míg a téglalap JPG-ben mentve (70%-os tömörítéssel is) 1352 bájt. Bonyolultabb grafikai elemeknél a méret-változtatás sokkal látványosabb.

 

Következő mintaként húzzunk egy sima vonalat (a téglalapunkba)!

Canvas vonal

És ennek a forráskódja a következő: (htmlpelda61.html)

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

</canvas>

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

</script>

</body>

</html>

Némi magyarázat a rajzhoz:

- Mindenképpen létre kell hozni a folyamat azonosítóját (id), mert ezt lehet használni hivatkozásként.

- Magában a <script> elemben elsőként egy c változót hozunk létre, így példányosítjuk a folyamatot: var c = document.getElementById("myCanvas");

- Ennek egy paramétereként 2D-s rajzot hozunk létre: var ctx = c.getContext("2d");

- Utána jöhet ennek a változónak a mozgatása. Elsőként simán mozgassuk a <cavas> elem által létrehozott felső sarokba: ctx.moveTo(0,0);

- Most húzzunk egy vonalat a jobb alsó sarokba: ctx.lineTo(200,100);

- Végül fejezzük be a rajzolást: ctx.stroke();

Most már készen van az egyenes vonalunk!

 

A koordináták tekintetében érdemes a következő rajzot tanulmányozni:

canvas koordináták

Ne feledjük: először a vízszintes (x) koordináta jön, majd csak utána a függőleges (y).

A rajz forráskódja (ötletadóként, magyarázat nélkül): (htmlpelda63.html)

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">

</canvas>

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.moveTo(10,10);

ctx.lineTo(200,10);

ctx.lineTo(190,0);

ctx.moveTo(200,10);

ctx.lineTo(190,20);

 

ctx.moveTo(10,10);

ctx.lineTo(10,200);

ctx.lineTo(0,190);

ctx.moveTo(10,200);

ctx.lineTo(20,190);

 

ctx.font = "15px Arial";

ctx.fillText("x",180,25);

ctx.fillText("y",20,180);

ctx.stroke();

</script>

</body>

</html>

26.2. fejezet: HTML5 canvas kör

A következő mintában rajzoljunk egy kört! (htmlpelda62.html)

canvas kör

Ennek forráskódja a következő:

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

</canvas>

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

</script>

</body>

</html>

Némi magyarázat a rajzhoz:

- A szokásos inicializálás után létrehoztuk a 200x100-as téglalapunkat, myCanvas azonosítóval.

- Magában a <script> elemben elsőként egy c változót hozunk létre, így példányosítjuk a folyamatot: var c = document.getElementById("myCanvas");

- Ennek egy paramétereként 2D-s rajzot hozunk létre: var ctx = c.getContext("2d");

- Most jöhet egy útvonal elkezdése: ctx.beginPath();

- Utána jön egy körív húzása, paraméterei: középpont x koordináta (95), középpont y koordináta (50), sugár (40), kezdő szög (0), záró szög (2*Math.Pi).

- Végül fejezzük be a rajzolást: ctx.stroke();

Érdekességként figyeljük meg, hogy a matematika órákon jól megszokott fok helyett radiánban kell számolni. A szögbeosztás is kicsit furcsa a matematikai koordináta-rendszerhez szokott szemem számára, így csináltam egy rajzot és (ismét magyarázat nélkül) közlöm ennek a forráskódját is:

canvas kör fokbeosztása

És a forráskód: (htmlpelda64.html)

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">

</canvas>

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.fillStyle = "black";

ctx.arc(150,150,120,0,Math.PI/6);

ctx.font = "15px Arial";

ctx.fillText("0",250,160);

ctx.fillText("PI/6",220,195);

 

ctx.fillStyle = "red";

ctx.arc(150,150,120,Math.PI/6,Math.PI/4);

ctx.fillText("PI/4",210,230);

 

ctx.fillStyle = "blue";

ctx.arc(150,150,120,Math.PI/4,Math.PI/2);

ctx.fillText("PI/2",150,250);

 

ctx.fillStyle = "black";

ctx.arc(150,150,120,Math.PI/2,Math.PI);

ctx.fillText("PI",40,170);

ctx.stroke();

</script>

</body>

</html>

További segítség a fok-> radián átszámításhoz:

Pi = 180o.

Pi/2 = 90 o.

Pi/3 = 60 o.

Pi/4 = 45 o.

Pi/6 = 30 o.

2*Pi = 360 o. (azaz teljes kör).

26.3. fejezet: HTML canvas szöveg

Az előzőekben már láthattunk példát a szövegre. Ehhez elsőként szükség van létrehozott változó font paraméterére:

ctx.font = "30px Arial";

A két kötelező érték a betű mérete, illetve a betű típusa.

Utána jöhet a tulajdonképpeni szöveg:

ctx.fillText("Hello World", 10, 50);

Paraméterek: maga a szöveg, majd a helyének koordinátái.

 

Más hatást érünk el, ha a fillText helyett a strokeText-et használjuk. (Gyakorlatilag kitöltés nélküli betűket rajzol ki.) Érdemes kipróbálni!

 

A szöveghez lehet színt is hozzáadni (mint az feljebb látható), illetve igazítani is lehet. Itt a paraméterek a szokásosak. Forráskód: (htmlpelda65.html)

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="300" height="200"

style="border:1px solid #d3d3d3;">

</canvas>

<script>

var canvas = document.getElementById("myCanvas");

var ctx=canvas.getContext("2d");

ctx.font="30px Times New Roman";

ctx.fillStyle = "red";

ctx.textAlign = "center";

ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

</script>

</body>

</html>

És a létrehozott kép:

Canvas szöveg

26.4. fejezet: Canvas kitöltés

A <canvas> lehetőséget ad egyes elemek sávos kitöltésére. Először egy sima téglalapot töltsünk ki piros-fehér színátmenettel!

Canvas kitöltés

És a forráskódja: (htmlpelda66.html)

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

</canvas>

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

// Gradiens létrehozása

var grd = ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Kitöltés

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

Némi magyarázat az új kifejezésekre:

- Először is létre kellett hozni egy gradienst: var grd = ctx.createLinearGradient(0,0,200,0);

- Utána meg kell adni színátmenet egyik végét: grd.addColorStop(0,"red");

- Majd a másikat is: grd.addColorStop(1,"white");

- Végül meg kell adni a műveletet, azaz a feltöltést: ctx.fillStyle = grd;

- Végül meg kell adni a feltöltendő téglalapot: ctx.fillRect(10,10,150,80);

Megjegyzés: az addColorStop számnak 0 és 1 között kell lennie.

További ötlet: nem csupán két szín lehet, hanem akár több is. Érdemes kipróbálni pl. a fenti kódba beszúrni a két hasonló sor közé a következőt:

grd.addColorStop(0.5,"green");

 

Ha körkörös kitöltést szeretnénk létrehozni, akkor egy kicsit másképp kell megadni a kódot. Alapvetően meg kell adni a kiinduló kör középpontjának koordinátáit és sugarát, majd a célkör hasonló adatait. Így jöhet létre a következő ábra:

Canvas körkörös kitöltés

És a hozzá tartozó forráskód: (htmlpelda67.html)

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

</canvas>

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

// Gradiens létrehozása

var grd = ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"white");

grd.addColorStop(1,"red");

// Kitöltés

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

</script>

 

</body>

</html>

 

További lehetőséget ad a mintával (esetleg képpel) való kitöltés. Ehhez meg kell adni egy képet, amivel utána ki lehet tölteni a megadott keretet. Ehhez vegyük példaként a már ismert hegycsúcsos kép kicsit lekerekített szélű verzióját! (htmlpelda54a.jpg)

Lekerekített kép

Most definiáljunk egy keretet, amibe ez beleilleszkedhet!

canvas kitöltés képpel

És a forráskód: (htmlpelda68.html)

<!DOCTYPE html>

<html>

<body>

<p>Felhaszn&aacute;lt k&eacute;p:</p>

<img id="hegyek" src="/htmlpelda54a.jpg" alt="Hegyek" width="400" height="270">

<p>Kit&ouml;ltend&ocirc; keret:</p>

<canvas id="myCanvas" width="200" height="135"

style="border:1px solid #d3d3d3;"></canvas>

<p><button onclick="myCanvas()">Pr&oacute;ba</button></p>

<script>

function myCanvas() {

    var c = document.getElementById("myCanvas");

    var ctx = c.getContext("2d");

    var img = document.getElementById("hegyek");

    ctx.drawImage(img,10,10);

}

</script>

</body>

</html>

Megjegyzés: a képnek kell adni egy azonosítót (most: hegyek) és ennek az azonosítónak meg kell egyeznie a canvas függvényében használttal. (document.getElementById)

 

A fejezet leghitelesebb forrása: https://www.w3schools.com/html/html5_canvas.asp  

Jóval részletesebb forrás (mintákkal): https://www.w3schools.com/graphics/canvas_intro.asp

Az itt leírt és még további függvények részletes (angol nyelvű) defeiálása: https://www.w3schools.com/graphics/canvas_reference.asp

 (c) TFeri.hu

Từ khóa » Html Css Grafika