Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:javascript:javascript_grafika

< JavaScript

JavaScript grafika

  • Szerző: Sallai András
  • Copyright © Sallai András, 2015
  • Licenc: GNU Free Documentation License 1.3

Koordináta rendszer

Rajzolás canvas elemre

<canvas id="vaszon" width="200" height="200">
A böngésződ nem támogatja a canvas grafikát!    
</canvas> 
var vaszon = document.getElementById("vaszon");
var ctx = vaszon.getContext("2d");
ctx.fillStyle="rgb(200, 0, 0)";
ctx.fillRect(10, 10, 50, 50);

A böngésződ nem támogatja a canvas grafikát!

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

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

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

Linkek

oktatas/web/javascript/javascript_grafika.txt · Utolsó módosítás: 2019/08/22 20:07 szerkesztette: admin