Felhasználói eszközök

Eszközök a webhelyen


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

oktatas:web:javascript:javascript_grafika [2019/08/22 20:07] (aktuális)
admin létrehozva
Sor 1: Sor 1:
 +[[oktatas:​web:​javascript|<​ JavaScript]]
 +====== JavaScript grafika ======
 +
 +  * **Szerző:​** Sallai András
 +  * Copyright (c) Sallai András, 2015
 +  * Licenc: GNU Free Documentation License 1.3
 +  * Web: http://​szit.hu
 +===== Koordináta rendszer =====
 +
 +
 +{{:​oktatas:​web:​javascript:​rajzolas.png|}}
 +===== Rajzolás canvas elemre =====
 +
 +<code html>
 +<canvas id="​vaszon"​ width="​200"​ height="​200">​
 +A böngésződ nem támogatja a canvas grafikát! ​   ​
 +</​canvas> ​
 +</​code>​
 +
 +<code javascript>​
 +var vaszon = document.getElementById("​vaszon"​);​
 +var ctx = vaszon.getContext("​2d"​);​
 +ctx.fillStyle="​rgb(200,​ 0, 0)";
 +ctx.fillRect(10,​ 10, 50, 50);
 +</​code>​
 +
 +<​html>​
 +<canvas id="​vaszon"​ width="​200"​ height="​100">​
 +A böngésződ nem támogatja a canvas grafikát! ​   ​
 +</​canvas> ​
 +
 +<​script>​
 +var vaszon = document.getElementById("​vaszon"​);​
 +var ctx = vaszon.getContext("​2d"​);​
 +ctx.fillStyle="​rgb(200,​ 0, 0)";
 +ctx.fillRect(10,​ 10, 50, 50);
 +</​script>​
 +</​html>​
 +
 +===== Útvonal használata =====
 +
 +<code javascript>​
 +  var vaszon = document.getElementById("​vaszon"​);​
 +  var ctx = vaszon.getContext("​2d"​);​
 +  ctx.beginPath();​
 +  ctx.moveTo(5,​ 5);
 +  ctx.lineTo(50,​ 50);
 +  ctx.stroke();​
 +</​code>​
 +
 +
 +<​html>​
 +<canvas id="​vaszon82423"​ width="​200"​ height="​100"></​canvas>​
 +<​script>​
 +  var vaszon = document.getElementById("​vaszon82423"​);​
 +  var ctx = vaszon.getContext("​2d"​);​
 +  ctx.beginPath();​
 +  ctx.moveTo(5,​ 5);
 +  ctx.lineTo(50,​ 50);
 +  ctx.stroke();​
 +</​script>​
 +</​html>​
 +
 +
 +<code javascript>​
 +  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();
 +</​code>​
 +
 +<​html>​
 +<canvas id="​vaszon03423"​ width="​200"​ height="​150"></​canvas>​
 +
 +<​script>​
 +  var vaszon = document.getElementById("​vaszon03423"​);​
 +  var ctx = vaszon.getContext("​2d"​);​
 +  ctx.beginPath();​
 +  ctx.moveTo(100,​50);​
 +  ctx.lineTo(75,​75);​
 +  ctx.lineTo(125,​75);​
 +  ctx.fill();
 +</​script>​
 +</​html>​
 +
 +===== Szöveg =====
 +
 +<code javascript>​
 +var vaszon = document.getElementById("​vaszon"​);​
 +var ctx = vaszon.getContext("​2d"​);​
 +ctx.font = "30px Arial";​
 +ctx.fillText("​alma",​30,​30);​
 +</​code>​
 +
 +<code javascript>​
 +var vaszon = document.getElementById("​vaszon"​);​
 +var ctx = vaszon.getContext("​2d"​);​
 +ctx.font = "30px Arial";​
 +ctx.strokeText("​alma",​ 30, 30);
 +</​code>​
 +===== Görbe =====
 +
 +
 +  ctx.arc(x, y, sugár, indulásiSzög,​ befejezésiSzög,​ [óramutJárEllen]);​
 +
 +A szögeket radiánban kell megadni. ​
 +
 +<code javascript>​
 +ctx.beginPath();  ​
 +var szog1 = 0;
 +var szog2 = 30;
 +ctx.arc(95, 100, 40, szog1*Math.PI/​180 , szog2*Math.PI/​180,​ true);
 +ctx.stroke();​
 +</​code>​
 +
 +Esetleg:
 +<code javascript>​
 +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();​
 +
 +
 +</​code>​
 +
 +
 +===== Kvadratikus görbe =====
 +
 +<code javascript>​
 +ctx.beginPath();​
 +ctx.moveTo(20,​ 20);
 +ctx.quadraticCurveTo(85,​25,​20,​62.5);  ​
 +ctx.stroke();​
 +</​code>​
 +
 +
 +===== Bézier görbe =====
 +
 +<code javascript>​
 +ctx.beginPath();​
 +ctx.moveTo(70,​ 40);  ​
 +ctx.bezierCurveTo(75,​37,​70,​25,​50,​25);​
 +ctx.stroke();​
 +</​code>​
 +
 +===== Linkek =====
 +  * https://​developer.mozilla.org/​en-US/​docs/​Web/​API/​Canvas_API/​Tutorial
 +
  
oktatas/web/javascript/javascript_grafika.txt · Utolsó módosítás: 2019/08/22 20:07 szerkesztette: admin