[[oktatas:web:javascript|< JavaScript]] ====== JavaScript grafika ====== * **Szerző:** Sallai András * Copyright (c) 2015, Sallai András * 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();

===== Linkek ===== * https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial