Rysunek na płótnie w formacie HTML
Rysuj na płótnie za pomocą JavaScript
Wszystkie rysunki na kanwie HTML muszą być wykonane za pomocą JavaScript:
Przykład
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Krok 1: Znajdź element płótna
Przede wszystkim musisz znaleźć element <canvas>.
Odbywa się to za pomocą metody HTML DOM getElementById():
var canvas = document.getElementById("myCanvas");
Krok 2: Utwórz obiekt rysunkowy
Po drugie, potrzebujesz obiektu rysunkowego na płótno.
getContext() to wbudowany obiekt HTML z właściwościami i metodami do rysowania:
var ctx = canvas.getContext("2d");
Krok 3: Rysuj na płótnie
Wreszcie możesz rysować na płótnie.
Ustaw styl wypełnienia obiektu rysunkowego na kolor czerwony:
ctx.fillStyle = "#FF0000";
Właściwość fillStyle może być kolorem CSS, gradientem lub wzorem. Domyślnym stylem wypełnienia jest czarny.
Metoda fillRect( x,y,width,height ) rysuje na kanwie prostokąt wypełniony stylem fill:
ctx.fillRect(0, 0, 150, 75);