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.

--- oktatas:web:javascript:javascript_grafika [2024/05/29 13:49] – [JavaScript grafika] admin
+++ oktatas:web:javascript:javascript_grafika [2024/06/06 13:50] (aktuális) – [Egyéb példák] admin
@@ Sor 651: / Sor 651: @@
 </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 =====