HTML5 Canvas
<canvas> tag grafiki niestandardowe, takie jak wykresy i inne obrazy, należy użyć skryptu do rysowania grafiki.
Na płótnie (Canvas) narysuj prostokąt czerwony prostokąt, gradient, kolorowe prostokąty, a niektóre kolorowego tekstu.
Co jest na płótnie?
HTML5 <canvas> Element służy do rysowania grafiki za pośrednictwem skryptów (zazwyczaj JavaScript), aby zakończyć.
<Canvas> jest graficznym opakowania, należy użyć skryptu do rysowania grafiki.
Można użyć Canva rysować ścieżki, pola, okręgi, znaki, oraz dodawanie obrazów za pomocą różnych metod.
Pomoc Browser
Internet Explorer 9+, Firefox, Opera, Chrome, Safari i wsparcie <canvas> elementu.
Uwaga: Internet Explorer 8 i wcześniejsze wersje IE nie obsługuje <canvas> elementu.
Tworzenie płótnie (Canvas)
Strona płótno jest prostokąt zostanie narysowany przez <canvas> elementu.
Uwaga: Domyślnie <canvas> elementu nie ma granic i treści.
<Canvas> Proste przykłady przedstawiają się następująco:
Uwaga: Etykieta zwykle trzeba określić atrybut id (skrypt często wymieniana), rozmiar, szerokość i wysokość atrybuty określają płótnie.
Wskazówka: Można użyć wielu <canvas> elementu na stronie HTML.
Korzystanie z atrybutu stylu, aby dodać obramowanie:
Przykłady
style="border:1px solid #000000;">
</canvas>
Spróbuj »
Użyj JavaScript do rysowania grafiki
Sam element canvas nie czerpie moc. Wszystkie prace muszą być sporządzone w języku JavaScript wykonywane wewnętrznie:
Przykłady
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Spróbuj »
Przykłady analizy:
Po pierwsze, znaleźć elementu <canvas>:
Następnie należy utworzyć obiekt kontekstu:
getContext ( "2d") obiekt jest wbudowany obiekt HTML5 ma kilka sposobów rysowania ścieżek, pudełek, koła, znaków i dodawanie zdjęć.
Poniższe dwa wiersze kodu narysować czerwony prostokąt:
ctx.fillRect(0,0,150,75);
Ustawianie właściwości fillStyle może być koloru CSS, gradient lub wzór. Domyślnym ustawieniem jest fillStyle # 000000 (czarny).
fillRect (x, y, szerokość,wysokość) Sposób definiuje wypełnioną prostokąta z obecnym sposobem.
współrzędne na płótnie
Płótno jest siatką dwuwymiarową.
płótno współrzędne lewego górnego rogu (0,0)
Powyższa metoda ma parametry fillRect (0,0,150,75).
Oznacza to, że: Narysuj prostokąt 150x75 na płótnie od lewego górnego rogu (0,0).
Przykłady współrzędnych
Jak widać poniżej, współrzędne X i Y na płótnie na płótnie do malowania pozycjonowania. Ruch prostokąta myszy współrzędne lokalizacji wyświetlacza.
Płótno - Path
Na kanwie lakierni, będziemy korzystać z następujących dwóch metod:
- moveTo(x, y) współrzędne wyznaczają linię zaczynając
- lineTo(x, y) współrzędnych definiuje końca linii
Musimy narysować linię na stosowanie metod "Ink", takich jak udar mózgu ().
Przykłady
Definiowanie rozpocząć współrzędne (0,0) i współrzędne końcowe (200, 100), a następnie użyć metody udar (), aby narysować linię:
JavaScript:
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Spróbuj »
Narysować okrąg na płótnie, będziemy używać w następujący sposób:
- arc (x, y, r, start, stop)
W rzeczywistości, użyliśmy podejścia "Ink", kiedy rysowanie okręgu, takich jak udar () lub wypełnić ().
Przykłady
Użyj łuku () aby narysować okrąg:
JavaScript:
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Spróbuj »
Płótno - Text
Użyj płótna do rysowania tekstu, ważne właściwości i metody, co następuje:
- font - zdefiniować czcionkę
- fillText (tekst, x, y)- zwraca solidne tekst na płótnie
- strokeText (tekst, x, y)- rysunek na płótnie pustego tekstu
Użyj fillText ():
Przykłady
Użyj czcionki "Arial" renderowania tekstu wysokiej 30px (stały) na płótnie:
JavaScript:
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
Spróbuj »
Użyj strokeText ():
Przykłady
Użyj czcionki "Arial" renderowania tekstu wysokiej 30px (drążony) na płótnie:
JavaScript:
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
Spróbuj »
Płótno - Gradient
Gradient mogą być wypełnione prostokąty, koła, linie, tekst, itp, różne kształty mogą definiować różne kolory.
Oto dwa różne sposoby ustawienia Canvas gradient:
- createLinearGradient (x, y, x1,y1) - Tworzenie gradient liniowy
- createRadialGradient (x, y, r,x1, y1, R1) - Tworzenie promieniowe / round-stopniowane
Kiedy używamy obiektu gradientu, należy użyć dwóch lub więcej przystanków kolorów.
addColorStop () w celu określenia koloru przystanków, korzystanie współrzędne opisują parametry, które mogą być 0-1.
Korzystanie gradientu ustawienia fillStyle lub strokeStyle wartość gradientu, a następnie narysować kształty, takie jak prostokąty, tekstu lub linii.
Użyj createLinearGradient ():
Przykłady
Tworzenie gradientu liniowego. Użyć wypełnienia gradientowego prostokąt:
JavaScript:
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Spróbuj »
Użyj createRadialGradient ():
Przykłady
Tworzenie promieniową / okrągły gradient. Użyć wypełnienia gradientowego prostokąt:
JavaScript:
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Spróbuj »
Obrazy na płótnie -
Jeden obraz na płótnie, stosując następujące metody:
- drawImage(image, x, y)
Użyj obrazu:
Przykłady
Obraz jest umieszczony na płótnie:
JavaScript:
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
Spróbuj »
Instrukcja HTML Canvas referencyjny
Pełna własność etykiecie może odnosić Canvas poradniku.
HTML <canvas> Tag
| Tag | 描述 |
|---|---|
| <canvas> | HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 |