szit

Felhasználói eszközök

Eszközök a webhelyen

Itt vagy: start » oktatas » web » javascript » javascript_grafika
Nyomvonal:
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

Előző változat mindkét oldalonElőző változat
Következő változat		Előző változat
oktatas:web:javascript:javascript_grafika [2022/01/30 20:43] – [Bézier görbe] adminoktatas:web:javascript:javascript_grafika [2024/06/06 13:50] (aktuális) – [Egyéb példák] admin
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+  * Szerkesztve: 2024 
 +  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
   * Web: https://szit.hu   * Web: https://szit.hu
 ===== Koordináta rendszer ===== ===== Koordináta rendszer =====
Sor 453: Sor 454:
  
 ==== Színátmenet 2 ==== ==== Színátmenet 2 ====
- 
- 
  
 <code html> <code html>
Sor 506: Sor 505:
  
  
 +===== 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>
 +
 +
 +===== Téglalap animációja =====
 +
 +<code javascript app.js>
 +
 +document.addEventListener("DOMContentLoaded", function() {
 +// window.addEventListener('load', function() {
 +    const canvas = document.getElementById("canvas");
 +    const ctx = canvas.getContext("2d");
 +    // Kör rajzolása
 +    ctx.beginPath();
 +    ctx.arc(50, 50, 30, 0, 2 * Math.PI);
 +    ctx.stroke();
 +
 +    // A téglalap alapadatai
 +    let rectX = 0;
 +    const rectY = 100;
 +    const rectWidth = 80;
 +    const rectHeight = 50;
 +    
 +    let intervalId;
 +    drawRectangle();
 +    
 +    function drawRectangle() {
 +        if (rectX > (canvas.width-80)) {
 +            clearInterval(intervalId);
 +        }        
 +        
 +        ctx.strokeStyle = 'blue';
 +        ctx.fillStyle = 'blue';
 +
 +        ctx.clearRect(0, rectY, canvas.width, rectHeight);
 +        ctx.fillRect(rectX, rectY, rectWidth, rectHeight);
 +        rectX += 1;
 +        if (rectX > canvas.width) {
 +            rectX = 0;
 +        }
 +    }
 +    
 +    document.getElementById("startButton").addEventListener("click", function() {
 +        intervalId = setInterval(drawRectangle, 10);
 +    });
 +    document.getElementById("stopButton").addEventListener("click", function() {
 +        clearInterval(intervalId);
 +    });
 +    document.getElementById("resetButton").addEventListener("click", function() {
 +        clearInterval(intervalId);
 +        rectX = 0;
 +        drawRectangle();
 +    });
 +});
 +
 +
 +</code>
  
 ===== Linkek ===== ===== Linkek =====
   * https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial   * https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
 +  * http://drawingincode.com/ (2024)
 +  * https://konvajs.org/ (2024)
  
  
oktatas/web/javascript/javascript_grafika.1643571794.txt.gz · Utolsó módosítás: 2022/01/30 20:43 szerkesztette: admin