Úvod do HTML plátna
V tomto článku uvidíme obrys na plátně HTML. Jak již víte, HTML je značkovací jazyk. Chcete-li návštěvníkovi prezentovat informace, můžete napsat HTML s tím, jaký text se zobrazí na displeji a jak se bude zobrazovat, tj. Velikost písma, barva, orientace atd. Pokud jde o přidávání vizuálů na stránku, je třeba propojit a vložte na stránku obrázky, které jsou uloženy odděleně od souboru HTML na vašem hostiteli.
Ale co když potřebujete něco nakreslit na stránku?
Co je to HTML plátno?
HTML plátno (používá se přes značku) je prvek HTML, který se používá k vykreslování grafiky (čáry, pruhy, grafy atd.) Na obrazovce počítače uživatele za běhu. Prvek plátna je však pouze informativní kontejner, kresba se provádí pomocí JavaScriptu. Je podporován všemi moderními webovými prohlížeči, které podporují HTML5 a mohou vykreslit JavaScript. Vytvoření plátna HTML je velmi jednoduché a můžete jej přidat na libovolnou stránku HTML pomocí následujícího.
Syntax:
Content here
Velikost plátna můžete definovat pomocí atributu width and height, ID prvku lze také definovat ve značce, což umožňuje použití stylů CSS na prvku canvas. Následuje příklad, jak můžete nakreslit obdélník pomocí prvku Canvas:
Kód:
#examplecanvas(border:2px solid green;)
Výstup:
Příklady kreslení plátna HTML
Nyní, když jste viděli, jak můžete nakreslit obdélník pomocí prvku plátno, podívejme se na některé další objekty, které lze nakreslit pomocí prvku na výstupní obrazovce prohlížeče.
1. Nakreslení čáry na stránku
moveTo (), tah () a lineTo () jsou metody, které lze použít k nakreslení přímek na webové stránce. Jak můžete hádat, moveTo () řekne polohu kurzoru do prostoru elementů a lineTo () je metoda, která říká koncový bod linie. Tah () zviditelňuje čáru. Zde je kód pro vaši informaci:
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();
);
Výstup:
2. Kreslení kruhu na plátně HTML
Na rozdíl od obdélníků neexistuje v JavaScriptu žádná zvláštní metoda, jak nakreslit kruh. Místo toho můžeme použít metodu arc (), která se používá k nakreslení oblouků k nakreslení kruhu na plátně. Chcete-li získat plátno s kruhem na něm, můžete použít následující:
Syntaxe:
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Zde je příklad stránky s kruhem:
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();
);
Výstup:
3. Kreslení textu na plátně HTML
Text lze také nakreslit na plátno HTML. Chcete-li na svůj text dostat text, můžete žalovat metodu filltext (). Následuje příklad stránky HTML, která obsahuje text uvnitř prvku canvas:
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);
);
Výstup:
4. Nakreslení oblouku uvnitř plátna HTML
Jak jsme diskutovali s kruhem, existuje metoda zvaná arc (), která se používá k nakreslení oblouků uvnitř HTML plátna. Zde je syntaxe metody, kde vše, co musíte udělat, je přidat vaši proměnnou:
context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);
Následuje stránka HTML, která má oblouk uvnitř prvku plátna:
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();
);
Výstup:
5. Kreslení lineárních nebo kruhových barevných přechodů
Tuto metodu můžete použít k vytvořeníLienearGradient () k nakreslení gradientů podle vašeho výběru uvnitř prvku plátno. U této metody budete muset k označení barev přechodu použít addColorStop ().
Syntax:
var gradient = context.createLinearGradient(startX, startY, endX, endY);
Zde je stránka s lineárním přechodem:
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);
Výstup:
Podobně je metoda kreslení kruhových přechodů createRadialGradient ().
Syntax:
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);
Výstup:
Závěr
Nyní, když jste obeznámeni s tím, co je plátno HTML a jak jej lze použít na webových stránkách, byste se měli cítit sebejistěji ve svých dovednostech v oblasti webového designu. I když je v některých případech možné obrázky použít, výhodou HTML plátna je to, že je škálovatelný a lehčí, pokud jde o velikost a výkon zpracování.
Doporučený článek
Toto je průvodce HTML plátnem. Zde diskutujeme Co je to HTML plátno a jeho příklady spolu s implementací kódu a výstupem. Další informace naleznete také v našich doporučených článcích -
- Prvních 16 atributů stylu HTML
- HTML vs HTML5 | Top 9 Srovnání
- WebGL vs plátno - top rozdíly
- 40 hlavních otázek rozhovoru HTML
- Nastavte barvu pozadí v HTML s příkladem