Bevezetés a HTML vászonba
Ebben a cikkben a HTML vászon körvonalait fogjuk látni. Mint már tudja, a HTML jelölőnyelv. Annak érdekében, hogy információkat jelenítsen meg a látogatónak, írhat HTML-t a megjelenítendő szöveggel és annak megjelenítésével, azaz betűméret, szín, tájolás stb. Ha látványterveket ad egy oldalhoz, akkor össze kell kapcsolnia és ágyazzon be képeket az oldalba, amelyeket a gazdagép HTML-fájljától külön tárol.
De mi van, ha rajzolnia kell valamit az oldalra?
Mi a HTML vászon?
A HTML vászon (címkén keresztül használt) egy HTML elem, amelyet grafikák (vonalak, oszlopok, grafikonok stb.) Rajzolására használnak a felhasználói számítógép képernyőjén menet közben. A vászon elem azonban csak egy információtartály, bár a rajz JavaScript segítségével készül. Ezt támogatja az összes modern böngésző, amely támogatja a HTML5-et, és képes megjeleníteni a JavaScriptet. A HTML vászon létrehozása nagyon egyszerű, és bármilyen HTML oldalhoz hozzáadhatja az alábbiak szerint.
Szintaxis:
Content here
A vászon méretét a szélesség és a magasság attribútum segítségével határozhatja meg, az elem azonosítója meghatározható a címkében is, amely lehetővé teszi a CSS stílusok használatát a vászon elemnél. Az alábbiakban bemutatjuk, hogyan lehet rajzolni egy téglalapot a Vászon elem használatával:
Kód:
#examplecanvas(border:2px solid green;)
Kimenet:
Példák a HTML vászonrajzra
Most, hogy meglátta, hogyan lehet rajzolni egy téglalapot a vászon elem használatával, vessünk egy pillantást más objektumokra, amelyeket rajzolhatunk az elem segítségével a böngésző kimeneti képernyőjén.
1. Vonal rajzolása egy oldalra
A moveTo (), a stroke () és a lineTo () olyan módszerek, amelyek segítségével egyenes vonalakat húzhatunk egy weboldalon. Amint kitalálhatja, a moveTo () megmutatja a kurzor helyzetét az elemtérbe, és a lineTo () az a módszer, amely megmondja a sor végpontját. A vonal () láthatóvá teszi a vonalat. Íme a kód az Ön hivatkozásához:
Kód:
Canvas Line Example
canvas (
border: 2px solid black;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.moveTo(10, 150);
context.lineTo(350, 100);
context.stroke();
);
Kimenet:
2. Rajzolj egy kört a HTML vászonra
A téglalapokkal ellentétben a JavaScriptben nincs külön módszer kör rajzolására. Ehelyett az arc () metódust használhatjuk, amelyet az ívek rajzolásához használunk kör rajzolására a vászonban. Ha egy vászonra rajzol egy kört, akkor az alábbiakat használhatja:
Szintaxis:
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Íme egy példa egy kört tartalmazó oldalra:
Kód:
Canvas with a circle
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(250, 150, 90, 0, 2 * Math.PI, false);
context.stroke();
);
Kimenet:
3. Szöveg rajzolása HTML vászonra
A szöveg HTML vászonra is felhívható. Ha szöveget szeretne a vászonra helyezni, beperelheti a filltext () metódust. Az alábbiakban bemutatunk egy példát egy HTML oldalra, amely szöveget tartalmaz a vászon elem belsejében:
Kód:
canvas with text inside the element
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.font = "bold 28px Arial";
context.fillText("This is text inside a canvas", 60, 100);
);
Kimenet:
4. ív rajzolása a HTML vászon belsejében
Amint egy kört tárgyaltuk, létezik egy arc () nevű módszer, amelyet ívek rajzolására használnak a HTML vászonba. Itt van a módszer szintaxisa, ahol csak annyit kell tennie, hogy hozzáadja a változót:
context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);
Az alábbiakban bemutatunk egy HTML oldalt, amelynek van íve a vászon elem belsejében:
Kód:
Arc inside an HTML Canvas
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(300, 300, 200, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
);
Kimenet:
5. Rajzoljon egy lineáris vagy kör alakú színátmenetet
Ezzel a módszerrel létrehozhatja aLienearGradient () elemet a választott színátmenetek rajzolásához a vászon elemben. Ezzel a módszerrel az addColorStop () alkalmazást kell használnia a színátmenetes színek jelölésére.
Szintaxis:
var gradient = context.createLinearGradient(startX, startY, endX, endY);
Itt van egy oldal, amelynek lineáris gradiens van:
Kód:
If you are seeing this. the browser does not support the HTML5 canvas.
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "green");
gradient.addColorStop(1, "red");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 300, 150);
Kimenet:
Hasonlóképpen, a körgradiensek rajzolásának módja a createRadialGradient ().
Szintaxis:
var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);
Kód:
If you are seeing this. the browser does not support the HTML5 canvas.
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createRadialGradient(80, 50, 10, 100, 50, 90);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "yellow");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 150, 80);
Kimenet:
Következtetés
Most, hogy megismeri, mi a HTML vászon, és hogyan lehet azt használni a weboldalakon, jobban bíznod kell a webdizájnban. Noha a képeket bizonyos esetekben lehet használni, a HTML-vászon előnye, hogy méretezhető és könnyebben méreteket és feldolgozási képességeket mutat.
Ajánlott cikk
Ez egy útmutató a HTML vászonhoz. Itt tárgyaljuk, mi az a HTML vászon és annak példái, valamint a kód megvalósítása és kimenete. Megnézheti a javasolt cikkeket is, ha többet szeretne megtudni -
- A 16 legnépszerűbb HTML stílusú attribútum
- HTML vs HTML5 | 9 legfontosabb összehasonlítás
- WebGL vs Canvas - legfontosabb különbségek
- A 40 legfontosabb HTML interjú kérdés
- Állítsa be a háttér színét HTML-ben a Példa segítségével