A kiválasztott változat és az aktuális verzió közötti különbségek a következők.
Következő változat | Előző változat | ||
oktatas:web:javascript:javascript_grafika [2019/08/22 20:07] admin létrehozva |
oktatas:web:javascript:javascript_grafika [2023/08/03 07:33] (aktuális) admin [JavaScript grafika] |
||
---|---|---|---|
Sor 3: | Sor 3: | ||
* **Szerző:** Sallai András | * **Szerző:** Sallai András | ||
- | * Copyright (c) Sallai András, 2015 | + | * Copyright (c) 2015, Sallai András |
- | * Licenc: GNU Free Documentation License 1.3 | + | * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] |
- | * Web: http://szit.hu | + | * Web: https://szit.hu |
===== Koordináta rendszer ===== | ===== Koordináta rendszer ===== | ||
Sor 37: | Sor 37: | ||
</script> | </script> | ||
</html> | </html> | ||
+ | |||
+ | |||
+ | ===== Téglalap ===== | ||
+ | |||
+ | |||
+ | <code html> | ||
+ | <canvas id="vaszon2" width="200" height="100" style="border:1px solid #000000;"> | ||
+ | A böngésződ nem támogatja a HTML5 rajzvászont. | ||
+ | </canvas> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | |||
+ | var c=document.getElementById("vaszon2"); | ||
+ | var ctx=c.getContext("2d"); | ||
+ | ctx.fillStyle="#0000ff"; | ||
+ | ctx.fillRect(10,10,150,75); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | </code> | ||
+ | |||
+ | |||
+ | <html> | ||
+ | <canvas id="vaszon2" width="200" height="100" style="border:1px solid #000000;"> | ||
+ | A böngésződ nem támogatja a HTML5 rajzvászont. | ||
+ | </canvas> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | |||
+ | var c=document.getElementById("vaszon2"); | ||
+ | var ctx=c.getContext("2d"); | ||
+ | ctx.fillStyle="#0000ff"; | ||
+ | ctx.fillRect(10,10,150,75); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | </html> | ||
+ | |||
+ | |||
===== Útvonal használata ===== | ===== Útvonal használata ===== | ||
Sor 85: | Sor 126: | ||
ctx.fill(); | ctx.fill(); | ||
</script> | </script> | ||
+ | </html> | ||
+ | |||
+ | |||
+ | ==== Vonalhúzás ==== | ||
+ | |||
+ | <code html> | ||
+ | <canvas id="vaszon3" width="200" height="100" style="border:1px solid #000000;"> | ||
+ | A böngésződ nem támogatja a HTML5 rajzvászont. | ||
+ | </canvas> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | |||
+ | var c=document.getElementById("vaszon3"); | ||
+ | var ctx=c.getContext("2d"); | ||
+ | ctx.moveTo(0,0); | ||
+ | ctx.lineTo(300,150); | ||
+ | ctx.stroke(); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | </code> | ||
+ | |||
+ | |||
+ | <html> | ||
+ | <canvas id="vaszon3" width="200" height="100" style="border:1px solid #000000;"> | ||
+ | A böngésződ nem támogatja a HTML5 rajzvászont. | ||
+ | </canvas> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | |||
+ | var c=document.getElementById("vaszon3"); | ||
+ | var ctx=c.getContext("2d"); | ||
+ | ctx.moveTo(0,0); | ||
+ | ctx.lineTo(300,150); | ||
+ | ctx.stroke(); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | </html> | ||
+ | |||
+ | |||
+ | ===== Kör ===== | ||
+ | |||
+ | <code html> | ||
+ | <canvas id="vaszon4" width="200" height="100" style="border:1px solid #000000;"> | ||
+ | A böngésződ nem támogatja a HTML5 rajzvászont. | ||
+ | </canvas> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | var c=document.getElementById("vaszon4"); | ||
+ | var ctx=c.getContext("2d"); | ||
+ | ctx.beginPath(); | ||
+ | ctx.arc(95,50,40,0,2*Math.PI); | ||
+ | ctx.stroke(); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | </code> | ||
+ | |||
+ | |||
+ | <html> | ||
+ | <canvas id="vaszon4" width="200" height="100" style="border:1px solid #000000;"> | ||
+ | A böngésződ nem támogatja a HTML5 rajzvászont. | ||
+ | </canvas> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | |||
+ | var c=document.getElementById("vaszon4"); | ||
+ | var ctx=c.getContext("2d"); | ||
+ | ctx.beginPath(); | ||
+ | ctx.arc(95,50,40,0,2*Math.PI); | ||
+ | ctx.stroke(); | ||
+ | </script> | ||
+ | |||
+ | </html> | ||
+ | |||
+ | ===== Több rajz ===== | ||
+ | |||
+ | <code html> | ||
+ | <canvas id="vaszon" width="600" height="220"></canvas> | ||
+ | |||
+ | <script> | ||
+ | var v = document.getElementById("vaszon").getContext("2d"); | ||
+ | |||
+ | v.fillStyle="rgba(0,0,123,1.0)"; | ||
+ | v.fillRect(50, 10, 150, 50); | ||
+ | |||
+ | v.strokeStyle="rgba(0,0,123,1.0)"; | ||
+ | v.strokeRect(50, 80, 240, 120); | ||
+ | |||
+ | v.beginPath(); | ||
+ | v.arc(450, 110, 100, Math.PI * 2/2, Math.PI * 4/2); | ||
+ | v.lineWidth = 10; | ||
+ | v.lineCap = 'round'; | ||
+ | v.strokeStyle = 'rgba(255, 127, 0, 1.0)'; | ||
+ | v.stroke(); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | </code> | ||
+ | |||
+ | <html> | ||
+ | <canvas id="vaszon334" width="600" height="220"></canvas> | ||
+ | |||
+ | <script> | ||
+ | var v = document.getElementById("vaszon334").getContext("2d"); | ||
+ | |||
+ | v.fillStyle="rgba(0,0,123,1.0)"; | ||
+ | v.fillRect(50, 10, 150, 50); | ||
+ | |||
+ | v.strokeStyle="rgba(0,0,123,1.0)"; | ||
+ | v.strokeRect(50, 80, 240, 120); | ||
+ | |||
+ | v.beginPath(); | ||
+ | v.arc(450, 110, 100, Math.PI * 2/2, Math.PI * 4/2); | ||
+ | v.lineWidth = 10; | ||
+ | v.lineCap = 'round'; | ||
+ | v.strokeStyle = 'rgba(255, 127, 0, 1.0)'; | ||
+ | v.stroke(); | ||
+ | |||
+ | </script> | ||
+ | |||
</html> | </html> | ||
Sor 102: | Sor 269: | ||
ctx.strokeText("alma", 30, 30); | ctx.strokeText("alma", 30, 30); | ||
</code> | </code> | ||
+ | |||
+ | ==== Szöveg ==== | ||
+ | |||
+ | |||
+ | |||
+ | <code html> | ||
+ | <canvas id="vaszon5" width="200" height="100" style="border:1px solid #000000;"> | ||
+ | A böngésződ nem támogatja a HTML5 rajzvászont. | ||
+ | </canvas> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | var c=document.getElementById("vaszon5"); | ||
+ | var ctx=c.getContext("2d"); | ||
+ | ctx.font="30px Arial"; | ||
+ | ctx.fillText("Helló Világ",10,50); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | </code> | ||
+ | |||
+ | |||
+ | <html> | ||
+ | <canvas id="vaszon5" width="200" height="100" style="border:1px solid #000000;"> | ||
+ | A böngésződ nem támogatja a HTML5 rajzvászont. | ||
+ | </canvas> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | |||
+ | var c=document.getElementById("vaszon5"); | ||
+ | var ctx=c.getContext("2d"); | ||
+ | ctx.font="30px Arial"; | ||
+ | ctx.fillText("Helló Világ",10,50); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | </html> | ||
+ | |||
+ | ==== Szöveg 2 ==== | ||
+ | |||
+ | |||
+ | |||
+ | <code html> | ||
+ | <canvas id="vaszon6" width="200" height="100" style="border:1px solid #000000;"> | ||
+ | A böngésződ nem támogatja a HTML5 rajzvászont. | ||
+ | </canvas> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | var c=document.getElementById("vaszon6"); | ||
+ | var ctx=c.getContext("2d"); | ||
+ | ctx.font="30px Arial"; | ||
+ | ctx.strokeText("Hello World",10,50); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | </code> | ||
+ | |||
+ | |||
+ | <html> | ||
+ | <canvas id="vaszon6" width="200" height="100" style="border:1px solid #000000;"> | ||
+ | A böngésződ nem támogatja a HTML5 rajzvászont. | ||
+ | </canvas> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | |||
+ | var c=document.getElementById("vaszon6"); | ||
+ | var ctx=c.getContext("2d"); | ||
+ | ctx.font="30px Arial"; | ||
+ | ctx.strokeText("Hello World",10,50); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | </html> | ||
+ | |||
+ | |||
+ | |||
===== Görbe ===== | ===== Görbe ===== | ||
Sor 154: | Sor 400: | ||
ctx.stroke(); | ctx.stroke(); | ||
</code> | </code> | ||
+ | |||
+ | ===== Színátmenet ===== | ||
+ | |||
+ | <code html> | ||
+ | <canvas id="vaszon7" width="200" height="100" style="border:1px solid #000000;"> | ||
+ | A böngésződ nem támogatja a HTML5 rajzvászont. | ||
+ | </canvas> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | var c=document.getElementById("vaszon7"); | ||
+ | var ctx=c.getContext("2d"); | ||
+ | |||
+ | // Átmenet | ||
+ | var grd=ctx.createLinearGradient(0,0,200,0); | ||
+ | grd.addColorStop(0,"blue"); | ||
+ | grd.addColorStop(1,"white"); | ||
+ | |||
+ | // Kitöltés | ||
+ | ctx.fillStyle=grd; | ||
+ | ctx.fillRect(10,10,150,80); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | </code> | ||
+ | |||
+ | |||
+ | <html> | ||
+ | <canvas id="vaszon7" width="200" height="100" style="border:1px solid #000000;"> | ||
+ | A böngésződ nem támogatja a HTML5 rajzvászont. | ||
+ | </canvas> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | |||
+ | var c=document.getElementById("vaszon7"); | ||
+ | var ctx=c.getContext("2d"); | ||
+ | |||
+ | // Átmenet | ||
+ | var grd=ctx.createLinearGradient(0,0,200,0); | ||
+ | grd.addColorStop(0,"blue"); | ||
+ | grd.addColorStop(1,"white"); | ||
+ | |||
+ | // Kitöltés | ||
+ | ctx.fillStyle=grd; | ||
+ | ctx.fillRect(10,10,150,80); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | </html> | ||
+ | |||
+ | |||
+ | ==== Színátmenet 2 ==== | ||
+ | |||
+ | <code html> | ||
+ | <canvas id="vaszon8" width="200" height="100" style="border:1px solid #000000;"> | ||
+ | A böngésződ nem támogatja a HTML5 rajzvászont. | ||
+ | </canvas> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | |||
+ | var c=document.getElementById("vaszon8"); | ||
+ | var ctx=c.getContext("2d"); | ||
+ | |||
+ | // Átmenet | ||
+ | var grd=ctx.createRadialGradient(75,50,5,90,60,100); | ||
+ | grd.addColorStop(0,"blue"); | ||
+ | grd.addColorStop(1,"white"); | ||
+ | |||
+ | // Kitöltés | ||
+ | ctx.fillStyle=grd; | ||
+ | ctx.fillRect(10,10,150,80); | ||
+ | |||
+ | |||
+ | </script> | ||
+ | |||
+ | </code> | ||
+ | |||
+ | |||
+ | <html> | ||
+ | <canvas id="vaszon8" width="200" height="100" style="border:1px solid #000000;"> | ||
+ | A böngésződ nem támogatja a HTML5 rajzvászont. | ||
+ | </canvas> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | |||
+ | var c=document.getElementById("vaszon8"); | ||
+ | var ctx=c.getContext("2d"); | ||
+ | |||
+ | // Átmenet | ||
+ | var grd=ctx.createRadialGradient(75,50,5,90,60,100); | ||
+ | grd.addColorStop(0,"blue"); | ||
+ | grd.addColorStop(1,"white"); | ||
+ | |||
+ | // Kitöltés | ||
+ | ctx.fillStyle=grd; | ||
+ | ctx.fillRect(10,10,150,80); | ||
+ | </script> | ||
+ | |||
+ | </html> | ||
+ | |||
+ | |||
+ | ===== Kép ===== | ||
+ | |||
+ | <code html> | ||
+ | |||
+ | <p>A kép használata:</p> | ||
+ | |||
+ | <img id="sikoly" src="sikoly.jpg" alt="A sikoly" width="220" height="277"> | ||
+ | |||
+ | <p>Vászon:</p> | ||
+ | |||
+ | <canvas id="vaszon9" width="250" height="300" style="border:1px solid #d3d3d3;"> | ||
+ | A böngésződ nem támogatja a HTML5 rajzvászont. | ||
+ | </canvas> | ||
+ | |||
+ | <script> | ||
+ | |||
+ | var c=document.getElementById("vaszon9"); | ||
+ | var ctx=c.getContext("2d"); | ||
+ | var img=document.getElementById("sikoly"); | ||
+ | ctx.drawImage(img,10,10); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | </code> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <html> | ||
+ | |||
+ | <p>A kép használata:</p> | ||
+ | <img id="sikoly" src="http://w3schools.com/html/img_the_scream.jpg" alt="A sikoly" width="220" height="277"> | ||
+ | |||
+ | <p>Vászon:</p> | ||
+ | <canvas id="vaszon9" width="250" height="300" style="border:1px solid #d3d3d3;"> | ||
+ | A böngésződ nem támogatja a HTML5 rajzvászont. | ||
+ | </canvas> | ||
+ | |||
+ | <script> | ||
+ | window.onload = function() { | ||
+ | var c=document.getElementById("vaszon9"); | ||
+ | var ctx=c.getContext("2d"); | ||
+ | var img=document.getElementById("sikoly"); | ||
+ | ctx.drawImage(img,10,10); | ||
+ | }; | ||
+ | </script> | ||
+ | |||
+ | </html> | ||
+ | |||
+ | |||
+ | ===== Egyéb példák ===== | ||
+ | |||
+ | <code html> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <meta charset="utf-8" /> | ||
+ | <title></title> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <canvas id="canvas1" width="200" height="100" style="border:1px solid #000000;"></canvas> | ||
+ | |||
+ | <script> | ||
+ | var can=document.getElementById("canvas1"); | ||
+ | var ctx=can.getContext("2d"); | ||
+ | ctx.fillStyle="#00FF00"; | ||
+ | ctx.fillRect(30,30,50,50); | ||
+ | </script> | ||
+ | </body> | ||
+ | </html> | ||
+ | </code> | ||
+ | |||
+ | |||
+ | |||
+ | <code html> | ||
+ | <canvas id="canvas1" width="200" height="100"style="border:1px solid #000000;"></canvas> | ||
+ | |||
+ | <script> | ||
+ | var can=document.getElementById("canvas1"); | ||
+ | var ctx=can.getContext("2d"); | ||
+ | |||
+ | var grd=ctx.createLinearGradient(0,0,200,0); | ||
+ | grd.addColorStop(0,"blue"); | ||
+ | grd.addColorStop(1,"white"); | ||
+ | |||
+ | ctx.fillStyle=grd; | ||
+ | ctx.fillRect(30,30,100,50); | ||
+ | </script> | ||
+ | </code> | ||
+ | |||
+ | |||
+ | <html> | ||
+ | <canvas id="canvas1" width="200" height="100"style="border:1px solid #000000;"></canvas> | ||
+ | |||
+ | <script> | ||
+ | var can=document.getElementById("canvas1"); | ||
+ | var ctx=can.getContext("2d"); | ||
+ | |||
+ | var grd=ctx.createLinearGradient(0,0,200,0); | ||
+ | grd.addColorStop(0,"blue"); | ||
+ | grd.addColorStop(1,"white"); | ||
+ | |||
+ | ctx.fillStyle=grd; | ||
+ | ctx.fillRect(30,30,100,50); | ||
+ | </script> | ||
+ | </html> | ||
+ | |||
+ | |||
+ | <code javascript> | ||
+ | var can=document.getElementById("canvas1"); | ||
+ | var ctx=can.getContext("2d"); | ||
+ | |||
+ | ctx.moveTo(0,0); | ||
+ | ctx.lineTo(200,100); | ||
+ | ctx.stroke(); | ||
+ | </code> | ||
+ | |||
+ | A moveTo() -tól a lineTo()-ig húzunk vonalat. | ||
+ | |||
+ | |||
+ | <code javascript> | ||
+ | //arc(x, y, r, start, stop) | ||
+ | var can=document.getElementById("canvas1"); | ||
+ | var ctx=can.getContext("2d"); | ||
+ | |||
+ | ctx.beginPath(); | ||
+ | ctx.arc(55, 50, 40, 0, 2 * Math.PI); | ||
+ | ctx.stroke(); | ||
+ | </code> | ||
+ | |||
+ | |||
+ | <html> | ||
+ | |||
+ | <canvas id="canvas3" width="200" height="100"style="border:1px solid #000000;"></canvas> | ||
+ | <script> | ||
+ | |||
+ | var can=document.getElementById("canvas3"); | ||
+ | var ctx=can.getContext("2d"); | ||
+ | |||
+ | ctx.beginPath(); | ||
+ | ctx.arc(55, 50, 40, 0, 2 * Math.PI); | ||
+ | ctx.stroke(); | ||
+ | </script> | ||
+ | </html> | ||
+ | |||
===== Linkek ===== | ===== Linkek ===== |