[[oktatas:web:javascript|< JavaScript]] ====== JavaScript grafika ====== * **Szerző:** 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]] * Web: https://szit.hu ===== Koordináta rendszer ===== {{:oktatas:web:javascript:rajzolas.png|}} ===== Rajzolás canvas elemre =====


var vaszon = document.getElementById("vaszon");
var ctx = vaszon.getContext("2d");
ctx.fillStyle="rgb(200, 0, 0)";
ctx.fillRect(10, 10, 50, 50);

===== Téglalap =====

===== Útvonal használata =====


  var vaszon = document.getElementById("vaszon");
  var ctx = vaszon.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(5, 5);
  ctx.lineTo(50, 50);
  ctx.stroke();


  var vaszon = document.getElementById("vaszon");
  var ctx = vaszon.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(100,50);
  ctx.lineTo(75,75);
  ctx.lineTo(125,75);
  ctx.fill();

==== Vonalhúzás ====

===== Kör =====

===== Több rajz =====

===== Szöveg =====


var vaszon = document.getElementById("vaszon");
var ctx = vaszon.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("alma",30,30);


var vaszon = document.getElementById("vaszon");
var ctx = vaszon.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("alma", 30, 30);

==== Szöveg ====

==== Szöveg 2 ====

===== Görbe ===== ctx.arc(x, y, sugár, indulásiSzög, befejezésiSzög, [óramutJárEllen]); A szögeket radiánban kell megadni.


ctx.beginPath();  
var szog1 = 0;
var szog2 = 30;
ctx.arc(95, 100, 40, szog1*Math.PI/180 , szog2*Math.PI/180, true);
ctx.stroke();

Esetleg:


var rad = function(deg) {
    return deg * Math.PI / 180;
}
var deg = function(rad) {
    return rad*(180/Math.PI);
}

ctx.beginPath();  
var szog1 = 0;
var szog2 = 30;
ctx.arc(95, 100, 40, rad(0) , rad(360), true);
ctx.stroke();

===== Kvadratikus görbe =====


ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(85,25,20,62.5);  
ctx.stroke();

===== Bézier görbe =====


ctx.beginPath();
ctx.moveTo(70, 40);  
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.stroke();

===== Színátmenet =====

==== Színátmenet 2 ====

===== Kép =====



A kép használata:



Vászon:

A kép használata:

Vászon:

===== Egyéb példák =====


var can=document.getElementById("canvas1");
var ctx=can.getContext("2d");

ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

A moveTo() -tól a lineTo()-ig húzunk vonalat.


//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();

===== Téglalap animációja =====



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();
    });
});

===== Linkek ===== * https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial * http://drawingincode.com/ (2024) * https://konvajs.org/ (2024)