Rysowanie HTML Canvas
- Poprzednia strona Podstawy Canvas
- Następna strona Koordynaty Canvas
Rysowanie na płótnie za pomocą JavaScript
Wszystkie rysunki na płótnie HTML muszą być wykonane za pomocą JavaScript:
Przykład
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Krok 1: Znajdowanie elementu Canvas
Najpierw musisz znaleźć element <canvas>.
To jest wykonane za pomocą metody HTML DOM getElementById():
const canvas = document.getElementById("myCanvas");
Krok 2: Tworzenie obiektu rysowania
Następnie potrzebujesz obiektu rysowania płótna.
getContext() to wbudowany obiekt HTML, który dostarcza atrybuty i metody do rysowania:
const ctx = canvas.getContext("2d");
Krok 3: Rysowanie na płótnie
Ostatnie, możesz rysować na płótnie.
Ustaw styl wypełnienia obiektu rysowania na czerwony:
ctx.fillStyle = "#FF0000";
Atrybut fillStyle może być kolorem CSS, gradientem lub wzorem. Domyślny fillStyle to czarny.
Metoda fillRect(x,y,szerokość,wysokość) rysuje prostokąt na płótnie, używając stylu wypełnienia do wypełnienia:
ctx.fillRect(0, 0, 150, 75);
Proszę zobacz również:
- Poprzednia strona Podstawy Canvas
- Następna strona Koordynaty Canvas
