Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:javascript:javascript_grafika

Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

Összehasonlító nézet linkje

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 =====
oktatas/web/javascript/javascript_grafika.1566497258.txt.gz · Utolsó módosítás: 2019/08/22 20:07 szerkesztette: admin