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 [2022/01/30 20:43]
admin [Bézier görbe]
+++ oktatas:web:javascript:javascript_grafika [2024/06/06 13:50] (aktuális)
admin [Egyéb példák]
@@ Sor 3: / Sor 3: @@
   * **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
 ===== Koordináta rendszer =====
@@ Sor 453: / Sor 454: @@
 ==== Színátmenet 2 ====
 <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 =====
   * https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
+  * http://drawingincode.com/ (2024)
+  * https://konvajs.org/ (2024)

szit

Felhasználói eszközök

Eszközök a webhelyen

Különbségek

Eszközök az oldalon