강의 추천:
HTML 캔버스 lineTo() 메서드
정의와 사용법 lineTo()
힌트:다음과 같은 메서드를 사용하여 새로운 점을 추가하고 마지막으로 지정된 캔버스 점으로 이동하는 선을 생성합니다(이 메서드는 선을 생성하지 않습니다). stroke() 메서드는 캔버스에서 정확한 경로를 그립니다.
예제
예제 1
경로를 시작하고 위치 0,0으로 이동합니다. 위치 300,150로 이동하는 선을 생성합니다:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
힌트:페이지 하단에 더 많은 예제가 제공됩니다.
문법
context.lineTo(x,y);
매개변수 값
| 매개변수 | 설명 |
|---|---|
| x | 경로의 목표 위치의 x 좌표. |
| y | 경로의 목표 위치의 y 좌표. |
更多例子
예제 2
글자 L 모양의 경로를 그립니다:
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();
브라우저 지원
표의 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
주의:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.
