Canvas területére kép beillesztés
Képet, a drawimage() metódussal illeszthetünk be.
A canvas területén használni kívánt képet, minden létező <script> előtt kell elhelyezni, lehetőleg a dokumentum elején.
Ha a rajzvászonhoz használni kívánt kép, zavaró a dokumentum elején, vagy a script-et megelőzően,
akkor, rejtsük el a style="display:none;" meghatározással.
A drawimage() metódus nem hívható meg, a kép betöltése előtt.
Canvas területén megjelenített kép, eredeti méretekben jelenik meg.
A képből annyi fog látszani, amennyit a canvas width / height méreteinél beállítottunk.
A canvas területén megjelenő képnek meghatározhatjuk, left / top kezdő pozícióját, azaz, elmozgathatjuk
jobbra / balra és le / fel a drawImage(img, y, x); metódusnál, az y és x értékekkel.
- Pozitív értéknél: Jobbra vagy le.
- Negatív értéknél: Balra vagy fel.
Megjegyzés:
A drawImage(img,x,y); metódus, nem mindig a nagykönyv szabályai szerint működik.
Sajnos előfordulhat, hogy az általunk elhelyezett fotó, saját számítógépünkön megjelenik, de ha elmegyünk barátunkhoz és az ő számítógépén megnézzük,
fotók nem jelennek meg.
Ekkor jövünk rá, hogy barátunk XP verziót használ, de mi Win8-on teszteltük és készítettük el.
Előfordulhat, hogy belépésnél nem jelenik meg a kép, de az oldal frissítését követően, vagy oldalról kilépni és újból belépni, akkor megjelenik.
Szerverre feltöltött témakörünk tartalmát módosítjuk, majd módosítást követően frissítjük oldalunkat, canvas területén képek nem jelennek meg. Ekkor az oldalról ki kell lépni, majd újból belépni, és megjelennek a képek.
Figyelj:
A canvas területén használni kívánt képet, minden létező canvas <script> előtt kell elhelyezni, lehetőleg a dokumentum elején.
Helyezzük el div szakaszban, akár több képet is, és a div szakaszt tiltsuk le.
Példa:
<div style="display: none;">
<img src="hegy.jpg" alt="canvas kép bemutató" border="0" id="hegy"/>
</div>
A canvashoz tartozó script, közvetlen a HTML dokumentumban van elhelyezve:
Van még egy lehetőségünk, a canvas rajzvásznon történő kép megjelenítéshez azoknak, akiknek még XP gépük van.
A kép meghívását követően, de még a canvas előtt, helyezünk el egy tetszőleges változóval rendelkező scriptet.
Példa:
<script> var foto = document.getElementById("hegy"); </script>
Eredeti képünk.
|
Eredeti képünk egy hegyoldal fotója, melyet lentebb,
Kép eredeti méretei: | 
|
Példák, eredeti kép elhelyezése, canvas területén .
Előfordulhat:
Képek megjelenéséhez böngészőnknél, oldal frissítése ikonra kell kattintani.
1. Példa: Így a kép, nem mindig jelenik meg, mert előfordulhat, hogy a script hamarabb betöltődik, mint a megjeleníteni kívánt kép.
<canvas id="canvaskep" width="300" height="250" style="border:2px solid lime">
Ön böngészője, nem támogatja canvas elemet!</canvas>
<script>
var id = document.getElementById("canvaskep");
var cek = id.getContext("2d");
var img = document.getElementById("hegy");
cek.drawImage(img,0,0); // Kép beillesztése és pozíciója.
</script>
| |
2. Példa: Így a kép mindig megjelenik, mert a script function, csak az oldal betöltődése után hajtódik végre.
<canvas id="CFkep" width="300" height="250" style="border:1px solid lime;">
Ön böngészője, nem támogatja canvas elemet!</canvas>
<script>
var c = document.getElementById("CFkep");
var cfkep = c.getContext("2d");
function CanvasHivottKep() {
var img = document.getElementById("hegy");
cfkep.drawImage(img,0,0); // Kép beillesztése és pozíciója.
}
window.onload = CanvasHivottKep();
</script>
| |
3. Példa: A canvas területét nagyobbra állítjuk, mint a kép méretei.
<canvas id="cn_kep" width="350" height="300" style="border:2px solid lime">
Böngészője nem támogatja canvas elemet.</canvas>
<script>
var ckep = document.getElementById("cn_kep");
var cn = ckep.getContext("2d");
var img = document.getElementById("hegy");
cn.drawImage(img,0,0); // Kép beillesztése és pozíciója.
</script>
| |
4. Példa: A canvas területét kisebbre állítjuk, mint a kép méretei.
<canvas id="ck_kep" width="200" height="150" style="border:2px solid lime">
Böngészője nem támogatja canvas elemet.</canvas>
<script>
var ckep = document.getElementById("ck_kep");
var ck = ckep.getContext("2d");
var img = document.getElementById("hegy");
ck.drawImage(img,0,0); // Kép beillesztése és pozíciója.
</script>
|
Canvas clip() kép
Ekkor a képből csak annyi látszik, amit a clip() területének és pozíciójának meghatároztunk.
A kép pozíciójának drawImage(img,x,y); meghatározásával, képet elmozgathatjuk, ekkor a clip() területén, képünk más és más területe lesz látható.
<canvas id="cl_kep" width="300" height="250" style="border:2px solid lime">
Böngészője nem támogatja canvas elemet.</canvas>
<script>
var clipkep = document.getElementById("cl_kep");
var clk = clipkep.getContext("2d");
clk.lineWidth = 4;
clk.strokeStyle = "red"; // Piros négyszög.
clk.rect(40,40,160,100); // Ez lesz a clip pozíciója és területe.
clk.stroke();
clk.clip(); // Kép a clip() után.
var img = document.getElementById("hegy");
clk.drawImage(img,0,0); // Kép beillesztése és pozíciója.
</script>
|
Kép árnyékolása, shadow meghatározásokkal.
<canvas id="shadowKep" width="350" height="320" style="border:2px solid lime">
Böngészője nem támogatja canvas elemet.</canvas>
<script>
var id = document.getElementById("shadowKep");
var sdowkep = id.getContext("2d");
sdowkep.shadowBlur = 30; // Árnyék szélessége.
sdowkep.shadowOffsetY = 12; // Árnyék, le vagy fel.
sdowkep.shadowOffsetX = 12; // Árnyék, jobbra vagy balra.
sdowkep.shadowColor = "blue"; // Árnyék színe.
var SdowImg = document.getElementById("hegy");
sdowkep.drawImage(SdowImg,20,20); // Kép beillesztése és pozíciója.
</script>
|
Figyelj:
A canvas területén használni kívánt képeket, minden létező <script> előtt kell elhelyezni, lehetőleg a dokumentum elején.
Több kép meghívása tetszőleges sorrendben.
2. Beillesztés, JS function függvény meghívásával:
<canvas id="CkepF" width="100" height="100" style="border:1px solid lime;">
Ön böngészője nem támogatja canvas elemet!</canvas>
<br />
<button onclick="HivottKep()">Kattints ide, az 1. kép megjelenítéséhez.</button>
<br />
<button onclick="HivottKep2()">Kattints ide, a 2. kép megjelenítéséhez.</button>
<br />
<button onclick="HivottKep3()">Kattints ide, a 3. kép megjelenítéséhez.</button>
<script>
var c = document.getElementById("CkepF");
var ctx = c.getContext("2d");
function HivottKep() {
var himg = document.getElementById("hegy");
ctx.drawImage(himg,0,0);
}
function HivottKep2() {
var zimg = document.getElementById("znyil");
ctx.drawImage(zimg,150,100);
}
function HivottKep3() {
var kimg = document.getElementById("kutya");
ctx.drawImage(kimg,20,130);
}
</script>
|