Metoda Canvas lineTo()

Podręcznik Canvas

Definicja i użycie

lineTo() Metoda dodaje nowy punkt i tworzy linię od tego punktu do ostatnio指定ного punktu na płótnie (ta metoda nie tworzy linii).

Wskazówka:Użyj stroke() Metoda rysuje dokładną ścieżkę na płótnie.

Przykład

Przykład 1

Rozpocznij ścieżkę, przesuń się do pozycji 0,0. Stwórz linię do pozycji 300,150:

Twoja przeglądarka nie obsługuje znacznika HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

Spróbuj sam

Wskazówka:Więcej przykładów dostępnych na dole strony.

Gramatyka

context.lineTo(x,y);

Wartość parametru

Parametr Opis
x Współrzędna x celu ścieżki.
y Współrzędna y celu ścieżki.

Więcej przykładów

Przykład 2

Narysuj ścieżkę, kształt litery L:

Twoja przeglądarka nie obsługuje znacznika HTML5 canvas.

JavaScript:

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

Spróbuj sam

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Komentarz:Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.

Podręcznik Canvas