płótno obiektu
Przedmiot jest nowy Canvas w HTML5.
HTML5 <canvas> tag służy do rysowania grafiki w locie, z JavaScript.
Dostęp do obiektu Canvas
Można uzyskać dostęp do <canvas> elementu za pomocą getElementById() :
Przykład
var x = document.getElementById("myCanvas");
Spróbuj sam " Tworzenie obiektu Canvas
Można utworzyć <canvas> elementu za pomocą document. createElement() document. createElement() Sposób:
Uwaga: <canvas> element nie posiada zdolności do rysowania własnych (jest tylko kontenerem dla grafiki) - należy użyć skryptu do faktycznie rysowania grafiki.
getContext() sposób wraca do obiektu, który dostarcza sposobów i właściwości rysunku na płótnie.
Wniosek ten obejmie właściwości i metody getContext("2d") przedmiotu, który może być wykorzystany do opracowania tekstu, linie, pola, kółka i inne - na płótnie.
Kolory, style i Cienie
| Nieruchomość | Opis |
|---|
| fillStyle | Zestawy lub zwraca kolor, gradient lub struktura użyte do wypełnienia rysunek |
| strokeStyle | Zestawy lub zwraca kolor, gradient lub wzór używany udarów |
| shadowColor | Ustawia lub zwraca kolor używany dla cieni |
| shadowBlur | Zestawy lub przywraca poziom rozmycia dla cienia |
| shadowOffsetX | Zestawy lub zwraca odległość poziomą cienia od kształtu |
| shadowOffsetY | Zestawy lub zwraca pionową odległość cienia od kształtu |
Styl linii
| Nieruchomość | Opis |
|---|
| lineCap | Ustawia lub zwraca stylu z zaślepkami na linię |
| lineJoin | Ustawia lub zwraca typ rożnego, gdy spotykają się dwie linie |
| lineWidth | Ustawia lub zwraca bieżącą szerokość linii |
| miterLimit | Ustawia lub zwraca maksymalną długość ścięcia |
prostokąty
ścieżki
| metoda | Opis |
|---|
| fill() | Wypełnia bieżącego rysunku (path) |
| stroke() | Faktycznie rysuje ścieżki zostały zdefiniowane |
| beginPath() | Początek ścieżki, albo resetuje bieżącą ścieżkę |
| moveTo() | Przesuwa ścieżki do określonego punktu na płótnie, bez tworzenia linii |
| closePath() | Tworzy ścieżkę od bieżącego punktu z powrotem do punktu wyjścia |
| lineTo() | Dodaje nowy punkt i tworzy linię od tego punktu do ostatniego określonego punktu na płótnie |
| clip() | Klipy regionu dowolnym kształcie i rozmiarze z oryginalnego płótna |
| quadraticCurveTo() | Tworzy Krzywa Béziera |
| bezierCurveTo() | Tworzy krzywą Beziera |
| arc() | Tworzy kąt / krzywą (used to create circles, or parts of circles) |
| arcTo() | Tworzy łuk / krzywa między dwoma stycznymi |
| isPointInPath() | Zwraca true, jeśli określony punkt znajduje się w bieżącej ścieżce, w przeciwnym przypadku false |
transformacje
Tekst
| Nieruchomość | Opis |
|---|
| font | Ustawia lub zwraca bieżące właściwości czcionek dla zawartości tekstowej |
| textAlign | Ustawia lub zwraca bieżące ustawienie dla zawartości tekstowej |
| textBaseline | Ustawia lub zwraca prąd bazowy tekst wykorzystane przy opracowywaniu tekstu |
Rysowanie obrazu
| metoda | Opis |
|---|
| drawImage() | Rysuje obraz, płótno, lub film na płótnie |
Pixel Manipulation
| Nieruchomość | Opis |
|---|
| width | Zwraca szerokość obiektu imageData |
| height | Zwraca wysokość obiektu imageData |
| data | Zwraca obiekt, który zawiera dane obrazu określonego obiektu imageData |
| metoda | Opis |
|---|
| createImageData() | Tworzy nowy, pusty imageData obiektu |
| getImageData() | Zwraca obiekt imageData która kopiuje dane pikseli dla określonego prostokąta na płótnie |
| putImageData() | Przekazuje dane obrazu (from a specified ImageData object) z powrotem na płótnie |
compositing
| Nieruchomość | Opis |
|---|
| globalAlpha | Ustawia lub zwraca aktualną wartość przezroczystości alfa lub rysunku |
| globalCompositeOperation | Ustawia lub zwraca, jak nowy obraz są rysowane na istniejącym obrazem |
Inny
| metoda | Opis |
|---|
| save() | Zapisuje stan bieżącego kontekstu |
| restore() | Zwraca wcześniej zapisany stan i atrybuty ścieżki |
| createEvent() | |
| getContext() | |
| toDataURL() | |
Standardowe właściwości i zdarzeń
Przedmiotem płótno obsługuje również standardowe właściwości i zdarzeń .
Podobne strony
Poradnik HTML: HTML5 Canvas
Odniesienia HTML: HTML <canvas> tag