API Canvas

Element <canvas> definiuje obszar bitmapowy na stronie HTML.

API Canvas pozwala JavaScriptowi na rysowanie grafik na płótnie.

API Canvas pozwala na rysowanie kształtów, linii, krzywych, ram, tekstu i obrazów, a także operacje na kolorach, obracaniu, przezroczystości i innych operacjach na pikselach.

Dodaj Canvas do HTML

Możesz dodać element canvas w dowolnym miejscu strony HTML za pomocą znacznika <canvas>:

Przykład

<canvas id="myCanvas" width="300" height="150"></canvas>

Spróbuj sam!

Jak uzyskać dostęp do elementu Canvas

Możesz użyć metody HTML DOM getElementById() do uzyskania dostępu do elementu <canvas>:

const myCanvas = document.getElementById("myCanvas");

Aby rysować na płótnie, musisz utworzyć obiekt kontekstu 2D:

const ctx = myCanvas.getContext("2d");

Notatki

Element HTML <canvas> sam w sobie nie ma funkcji rysowania.

Musisz użyć JavaScript do rysowania jakichkolwiek grafik.

Metoda getContext() zwraca obiekt z narzędziami do rysowania (metodami).

Rysowanie na płótnie

Po utworzeniu obiektu kontekstu 2D, możesz rysować na płótnie.

Poniższa metoda fillRect() rysuje czarny prostokąt, którego górny lewy róg znajduje się w pozycji 20,20. Szerokość tego prostokąta wynosi 150 pikseli, a wysokość 100 pikseli:

Przykład

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Spróbuj sam!

Używając koloru

Property fillStyle ustawia kolor wypełnienia obiektu rysowania:

Przykład

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Spróbuj sam!

Możesz również użyć metody document.createElement() do utworzenia nowego elementu <canvas> i dodania go do istniejącej strony HTML:

Przykład

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Spróbuj sam!

Ścieżka

Zwykłe metody rysowania na płótnie:

1. Rozpoczęcie ścieżki - beginPath()
2. Przeniesienie do punktu - moveTo()
3. Rysowanie w ścieżce - lineTo()
4. Rysowanie ścieżki - stroke()

Przykład

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Spróbuj sam!