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 [2024/05/29 13:49] – [Linkek] adminoktatas:web:javascript:javascript_grafika [2024/06/06 13:50] (aktuális) – [Egyéb példák] admin
Sor 4: Sor 4:
   * **Szerző:** Sallai András   * **Szerző:** Sallai András
   * Copyright (c) 2015, Sallai András   * Copyright (c) 2015, Sallai András
 +  * Szerkesztve: 2024
   * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]   * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
   * Web: https://szit.hu   * Web: https://szit.hu
Sor 650: Sor 651:
 </html> </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 =====
oktatas/web/javascript/javascript_grafika.1716983355.txt.gz · Utolsó módosítás: 2024/05/29 13:49 szerkesztette: admin