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
- << Előző
- Következő