HTML <canvas> Element służy do rysowania grafiki na stronie internetowej.
Grafika na lewo jest tworzony z <canvas> . pokazuje, że cztery elementy: czerwonego prostokąta prostokąt gradient prostokąta wieloskładnikowego i tekst wielokolorowe.
Co to jest HTML Canvas ?
HTML <canvas> Element służy do rysowania grafiki, na bieżąco, za pomocą skryptów (usually JavaScript) .
<canvas> elementu jest tylko kontenerem dla grafiki. Musisz użyć skryptu do faktycznie rysowania grafiki.
Canvas ma kilka sposobów rysowania ścieżki, pola, okręgów, tekstu i dodawania obrazów.
Element canvas jest częścią HTML5 i pozwala na dynamiczną skryptów renderowanie kształtów 2D i bitmapy. Jest to niski poziom, model proceduralny, który aktualizuje mapy bitowej i nie posiada wbudowany wykres sceny.
Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje <canvas> elementu.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Historia
Płótno zostało początkowo wprowadzone przez Apple do stosowania wewnątrz własnej Mac OS X składnika WebKit w 2004 aplikacjach zasilania, takich jak widżety Kokpit i przeglądarką Safari.
Później, w 2005 roku został przyjęty w wersji 1.8 przeglądarek Gecko i Opera w 2006 roku i standaryzowany przez Application Technology Group (WHATWG) Web Hypertext pracuje nad nowymi proponowanych specyfikacji dla następnej generacji technologii internetowych.
Stosowanie
Płótno składa się z regionu rozciągliwej zdefiniowanego w kodzie HTML z wysokości i szerokości atrybutów. Kod JavaScript może uzyskać dostęp do obszaru przez pełny zestaw funkcji do rysowania podobnych do tych z innych wspólnych 2D API, pozwalając na dynamicznie generowanych grafiki.
Niektóre przewidywane zastosowania płótnie zawierać wykresy budowlanych, animacje, gry i kompozycji obrazu.
Canvas Przykłady
canvas to prostokątny obszar na stronie HTML. Domyślnie canvas nie ma granic i nie ma treści.
Znacznik wygląda następująco:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Zawsze określić atrybut id (to be referred to in a script) , a szerokość i wysokość przypisują określić rozmiar canvas .
Aby dodać obramowanie, należy użyć style atrybut:
Podstawowe Canvas Przykład
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas> Spróbuj sam " Rysowanie za pomocą JavaScript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75); Spróbuj sam " Narysuj linię
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); Spróbuj sam " Narysować okrąg
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); Spróbuj sam " Rysowanie tekstu
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); Spróbuj sam " Skok Tekst
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); Spróbuj sam " Narysować gradient liniowy
var c = document.getElementById("myCanvas");
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 sam " Draw okrężnego gradientu
var c = document.getElementById("myCanvas");
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 sam " Narysuj obraz
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10); Spróbuj sam " HTML Canvas Tutorial
Aby dowiedzieć się wszystkiego o HTML <canvas> , odwiedź naszą pełną HTML Canvas Tutorial .