Vissza canvas témakörökhöz.

Canvas egyenesvonalú alakzatok.

Az Ön böngészője, nem támogatja a HTML5 canvas vászoncímkét / rajzokat. Válasszon másik böngészőt!

Vonal, derékszög, háromszög, négyszög, sokszög, és törlés.

A canvas rajzokhoz, JavaScript társfüggvények nagy csoportja áll rendelkezésre.

Példák:


Rajz teszt.
<canvas id="rajz01" width="150" height="150" style="border:2px solid lime"></canvas>
<script>
     var id = document.getElementById('rajz01');
     var rajz = id.getContext('2d');
     Ide írjuk, vagy másoljuk be, a rajzok felett látható, meghatározásokat.
</script>
   rajz.fillRect(20, 20, 100, 100);




   rajz.fillStyle = "rgb(0, 160, 230)";
   rajz.fillRect(20, 20, 100, 100);



   rajz.lineWidth = 2;
   rajz.strokeStyle = "rgb(0, 0, 250)";
   rajz.strokeRect(20, 20, 100, 100);


   rajz.lineWidth = 2;
   rajz.strokeStyle = "rgb(0, 0, 250)";
   rajz.strokeRect(20, 20, 100, 100);
 
   rajz.fillStyle = "rgba(0, 160, 230, 0.75)";
   rajz.fillRect(40, 40, 100, 100);
rajz.beginPath();
rajz.fillStyle = 'teal';
rajz.fillRect(20, 20, 100, 100);

rajz.lineWidth = 5;
rajz.strokeStyle = 'red';
rajz.strokeRect(20, 20, 100, 100);

rajz.fillStyle = "teal";
rajz.fillRect(20,20, 100,100);

rajz.lineWidth = 5;
rajz.strokeStyle = "red";
rajz.strokeRect(20,20, 100, 100);

rajz.clearRect(40, 40, 100, 35);






A fenti rajzokat egy <canvas>, azaz, rajzterületen is, megjeleníthetjük.
Ehhez, a <canvas> területét nagyobbra kell beállítani.

Részletek a fenti rajzokból.

<head>
  <style type="text/css"> 
      #rajzvaszon{border: 10px outset green;  background-color: yellow;} 
  </style>
</head>
<body>
<canvas id="rajzvaszon" width="300" height="450"></canvas>

<script>
 var id = document.getElementById('rajzvaszon');
 var negyszog = id.getContext('2d');
 // Első derékszögű négyzet vagy téglalap, háttérszíne alapértelmezett, fekete.
 negyszog.fillRect(20, 20, 100, 100);
 
 // Második derékszögű négyzet vagy téglalap, háttérszíne világoskék.
 negyszog.fillStyle = "rgb(0, 160, 230)";
 negyszog.fillRect(130, 20, 100, 100);
 
 // Harmadik derékszögű négyzet vagy téglalap, keret(border):vastagsága 4px; színe kék.
 negyszog.lineWidth = 4;
 negyszog.strokeStyle = "rgb(0, 0, 250)";
 negyszog.strokeRect(20, 150, 100, 100);
 
 // Negyedik derékszögű négyzet vagy téglalap, keret(border):vastagsága 4px; színe kék.
 negyszog.lineWidth = 4;
 negyszog.strokeStyle = "rgb(0, 0, 250)";
 negyszog.strokeRect(130, 150, 100, 100);
 
 // Ötödik derékszögű négyzet vagy téglalap, háttérszíne világoskék, és átláthatósági értéke = 0.75 
 negyszog.fillStyle = "rgba(0, 160, 230, 0.75)";
 negyszog.fillRect(150, 170, 100, 100);
 
 // Hatodik négyszög, háttérszíne piros
 negyszog.beginPath();
 negyszog.rect(20, 300, 150, 100);
 negyszog.fillStyle = "red";
 negyszog.fill();

 // Hetedik négyszög, háttérszíne kék
 negyszog.beginPath();
 negyszog.rect(40, 320, 150, 100);
 negyszog.fillStyle = "blue";
 negyszog.fill();
</script>
</body>


Vonalak, derékszög, háromszög, négyszög, sokszög.

Rajz kezdete: beginPath()
Rajz vége: closePath()

Egyenes vonalak rajzolását, a következő módon tehetjük:
moveTo (x,y) - A ceruzát a megadott kezdőpontba mozgatja.
lineTo (x,y) - A megadott végpontig vonalat húz.

stroke(), összeköti a megadott pozíciókat, vagy fill(), kitölti a megrajzolt formát.
strokeStyle, (rgb) keretszínt vagy (rgba) színátmenet, láthatósági tulajdonságot határozhatunk meg.
fillStyle, (rgb) háttérszínt vagy (rgba) színátmenet, láthatósági tulajdonságot határozhatunk meg.

Vonalak:

Ön böngészője, nem támogatja a HTML5 vászoncímkét.
<canvas id="myVonal" width="300" height="150" style="border:1px solid #d3d3d3;">
Az Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>
<script>
var id = document.getElementById("myVonal");
var rajz = id.getContext("2d");
rajz.beginPath();
rajz.lineWidth=3;           // Vonal vastagság.
rajz.moveTo(20, 20);     // Első vonal, kezdő pozíciója.
rajz.lineTo(20, 100);      // Első vonal, vég pozíciója.

rajz.moveTo(40, 20);     // Második vonal, kezdő pozíciója.
rajz.lineTo(40, 100);      // Második vonal, vég pozíciója.
rajz.closePath()
rajz.strokeStyle = "red";   // Vonalak színe, piros.
rajz.stroke();

rajz.beginPath();
rajz.moveTo(50, 50);     // Harmadik vonal, kezdő pozíciója.
rajz.lineTo(150, 50);      // Harmadik vonal, vég pozíciója.

rajz.moveTo(50, 70);     // Negyedik vonal, kezdő pozíciója.
rajz.lineTo(150, 70);      // Negyedik vonal, vég pozíciója.
rajz.strokeStyle = "blue";   // Vonalak színe, kék.
rajz.stroke();
</script> 

Derékszög:

Ön böngészője, nem támogatja a HTML5 vászoncímkét.
<canvas id="derekszog" width="300" height="150" style="border:1px solid #d3d3d3;">
Az Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>
<script>
var id = document.getElementById("derekszog");
var rajz = id.getContext("2d");
rajz.beginPath();                 /* Rajz kezdete.*/
rajz.moveTo(20, 20);          /* Kezdő pozíció.*/
rajz.lineTo(20, 100);
rajz.lineTo(70, 100);
rajz.strokeStyle = "red";        /* Vonal színe.*/
rajz.stroke();
</script> 

Tetszőleges háromszög:

<canvas id="haromszog" width="300" height="300" style="border:1px solid lime;">
Az Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>
<script>
var hszog = document.getElementById('haromszog');
var rajz = hszog.getContext('2d');
rajz.lineWidth=5;              /* Vonal vastagsága.*/
rajz.beginPath();               /* Rajz kezdete.*/
rajz.moveTo(20, 20);       /* Kezdő pozíció.*/
rajz.lineTo(20, 100);
rajz.lineTo(70, 100);
rajz.strokeStyle = "red";     /* Vonal (border) színe. */
rajz.closePath();                 /* Rajz vége. */
rajz.stroke();                      /* Összeköti a megadott pozíciókat. */
/* rajz.fill(); */                   /* Ha engedélyezzük, kitölti a megrajzolt formát. */
</script>

Tetszőleges négyszög.

<canvas id="tnegyszog" width="300" height="300">
Az Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>
<script>
var nszog = document.getElementById('tnegyszog');
var rajz = nszog.getContext('2d');
rajz.lineWidth=5;      /* Vonal vastagsága.*/
rajz.beginPath();      /* Rajz kezdete.*/
rajz.moveTo(20, 20);   /* Kezdő pozíció.*/
rajz.lineTo(50,100);
rajz.lineTo(200,100);
rajz.lineTo(100, 20);
rajz.closePath();      /* Rajz vége. */
rajz.stroke();              /* Összeköti a megadott pozíciókat. */
/* rajz.fill(); */            /* Ha engedélyezzük, kitölti a megrajzolt formát. */
</script>

Tetszőleges sokszög:

<canvas id="sokszog" width="300" height="300" style="border:1px solid lime;">
Az Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>
<script>
var sszog = document.getElementById('sokszog');
var rajz = sszog.getContext('2d');
rajz.lineWidth=5;      /* Vonal vastagsága.*/
rajz.beginPath();      /* Rajz kezdete.*/
rajz.moveTo(80, 20);   /* Kezdő pozíció.*/
rajz.lineTo(20, 80);
rajz.lineTo(20, 160);
rajz.lineTo(80, 220);
rajz.lineTo(160, 220);
rajz.lineTo(220, 160);
rajz.lineTo(220, 80);
rajz.lineTo(160, 20);
rajz.closePath();        /* Rajz vége. */
rajz.stroke();              /* Összeköti a megadott pozíciókat. */
/* rajz.fill(); */            /* Ha engedélyezzük, kitölti a megrajzolt formát. */
</script>

Tipp, a rajzok elkészítéséhez:







1.
Használjunk négyzetrácsos (kockás) füzetet.
Egy-egy négyzetrács méretét, 20x20px értéknek vegyük.
2.
Készítsünk rácsos képet számozásokkal, majd ezt, háttérkép formátumban illesszük be.
Készítsük el a rajzunkat, ha kész, töröljük a háttérképet.

<head>
<style type="text/css">
.pxracs{ padding-top:16px; padding-left:25px; background: url(pxracsozat.jpg); }
</style>
</head>
<body>
<div class="pxracs" style="width:350px; height:350px;">
<canvas id="sokszograjz" width="300" height="300" style="border:1px solid blue;"></canvas>
</div>
<script>
var sszog = document.getElementById('sokszograjz');
var rajz = sszog.getContext('2d');
rajz.lineWidth=3;
rajz.beginPath();
rajz.moveTo(80, 20);
rajz.lineTo(20, 80);
rajz.lineTo(20, 160);
rajz.lineTo(80, 220);
rajz.lineTo(160, 220);
rajz.lineTo(220, 160);
rajz.lineTo(220, 80);
rajz.lineTo(160, 20);
rajz.closePath();
rajz.stroke();
/*rajz.fill();*/
</script>




Szabályos háromszög, négyszög, ötszög, hatszög, sokszög rajzolás.

<canvas id="Tszog" width="320" height="280" style="border:2px solid blue">
<script>
var id = document.getElementById('Tszog');
var tsszog = id.getContext('2d');
  var szogek = 6;         // Szögek számának meghatározása. (háromszög=3; négyszög=4; ötszög=5; stb.)
  var meret = 100;        // Azon kör sugara, mely minden sarkot (szöget) érint. ( Mérete, meghatározza alakzat nagyságát.)
  
  // Kör központjának (center), left és top értékei.
  var LeftC = 140;         // let center.   ( Vízszintes mozgatáshoz.) 
  var TopC = 120;         // top center.  ( Függőleges mozgatáshoz.)
  
  tsszog.beginPath();    // Rajz kezdete.
  tsszog.moveTo ( LeftC + meret*Math.cos(0) , TopC + meret*Math.sin(0) );     // Kezdő pozíció.
  for (i=1; i<= szogek; i++) { 
  tsszog.lineTo (LeftC + meret*Math.cos(i*2*Math.PI / szogek) , TopC + meret*Math.sin(i*2*Math.PI / szogek) ); } 
  tsszog.strokeStyle = "black"; 
  tsszog.lineWidth = 2; 
  tsszog.stroke();
  // tsszog.fillStyle="yellow";  // Alakzat kitöltési színe, ha engedélyezzük.
  // tsszog.fill();                          // Ha engedélyezzük, alakzatot kitölti meghatározott színnel. 
</script>