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:
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:
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)!
É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:
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)
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:
É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:
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!
É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:
É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)
Most definiáljunk egy keretet, amibe ez beleilleszkedhet!
És a forráskód: (htmlpelda68.html)
<!DOCTYPE html>
<html>
<body>
<p>Felhasznált kép:</p>
<img id="hegyek" src="/htmlpelda54a.jpg" alt="Hegyek" width="400" height="270">
<p>Kitöltendô keret:</p>
<canvas id="myCanvas" width="200" height="135"
style="border:1px solid #d3d3d3;"></canvas>
<p><button onclick="myCanvas()">Pró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