Canvas egyenesvonalú alakzatok.
Vonal, derékszög, háromszög, négyszög, sokszög, és törlés.
- A canvas, azaz rajzterület:
- Annyi canvas elemet helyezhetünk el, amennyire szükségünk van.
- Minden canvas elemnek, legyen egyedi " id " azonosítója.
- Meg kell határozni width és height méreteit.
- A width és height méretein kívül eső rajzok, nem jelennek meg.
- Továbbiak nem kötelezőek:
- Háttérszín, background-color: valami;
- Keret, border: vastagság px stílusának színe;
A canvas rajzokhoz, JavaScript társfüggvények nagy csoportja áll rendelkezésre.
Példák:
- beginPath() - Rajz kezdete.
- closePath() - Rajz vége.
- fill() - Kitölti a megrajzolt formát. ( Alapértelmezett értéke: fekete.)
- fillStyle = "rgb" vagy "rgba"
- fillStyle="rgb(0, 160, 230)" - Kitöltési stílus, alakzat háttérszíne.
- fillStyle= "rgba(0, 160, 230, 0.75)"; - Kitöltési stílus, alakzat háttérszíne, és átláthatósága.
- fillRect(y, x, w, h); - Pozíciók: y=Left; x=Top; Méretek: width(szélesség), height(magasság) alapján négyszöget rajzol.
- strokeRect (y, x, w, h) - Négyszöget rajzol y-x pozícióba w-h méretek alapján, az érvényben lévő kontúrvonallal.
- strokeStyle = "rgb" vagy "rgba" Keret stílusa, színe.
- lineWidth - Vonal, azaz, keretvastagságot definiálhatjuk vele.
- moveTo (y, x) - A ceruzát a megadott (y-left,x-top) kezdőpontba mozgatja
- lineTo (y, x) - A megadott (y-left,x-top) végpontig, vonalat húz.
- Annyi lineTo(y,x) metódust írunk be, amennyi a megrajzolandó alakzathoz, szükséges.
- stroke () Felhívja a megadott útvonalat az összes moveTo() és lineTo() metódussal. (Az alapértelmezett szín, fekete.)
- Használhatjuk a strokeStyle tulajdonságot, mellyel meghatározhatunk egy másik színt vagy színátmenetet.
- clearRect (y, x, w, h) - Az y-x koordináták és w-h méretek alapján, törli a kijelölt területet.
- Törölhetünk minden rajzot a canvas területéről, ha a pozíciót y=0, x=0-ra, méreteit a canvas width/height méreteire állítjuk, be.
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: |
<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: |
<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.
<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>
|