HTML 캔버스 lineTo() 메서드
예시
경로를 시작하고 위치 0,0으로 이동합니다. 300,150 위치에 선을 만듭니다.
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.stroke();
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| lineTo() | Yes | 9.0 | Yes | Yes | Yes |
정의 및 사용
lineTo() 메서드는 새 지점을 추가하고 캔버스의 마지막 지정된 지점에서 해당 지점까지 선을 만듭니다(이 메서드는 선을 그리지 않음).
팁: 실제로 캔버스에 경로를 그리려면 stroke() 메서드를 사용하십시오 .
| 자바스크립트 구문: | 컨텍스트 .lineTo( x,y ); |
|---|
매개변수 값
| Parameter | Description | Play it |
|---|---|---|
| x | The x-coordinate of where to create the line to | |
| y | The y-coordinate of where to create the line to |
더 많은 예
예시
문자 L 모양의 경로를 그립니다.
자바스크립트:
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();
❮ HTML 캔버스 참조