HTML 참조 매뉴얼

HTML 태그 전체

HTML canvas lineTo() 메서드

lineTo()는 Canvas 2D API는 실제로 그리지 않고 서브 경로의 끝에서 x, y 좌표로의 선을 연결하는 방법을 사용합니다。

온라인 예제

路径开始，移动到位置 0,0。创建到达位置 300,150 的一条线：

예제

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas lineTo() 메서드 사용-기본 가이드(oldtoolbag.com)</title>/<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
당신의 브라우저는 HTML을5　canvas 태그。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
</script>
</body>
</html>

테스트 보기 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 및 Safari가 lineTo()를 지원합니다 메서드。

주의：Internet Explorer 8 이전 버전은 <canvas> 요소를 지원하지 않습니다。

정의와 사용법

lineTo() 메서드는 새로운 점을 추가하고 마지막으로 지정된 점에서의 선을 생성합니다（이 메서드는 선을 생성하지 않습니다）。

힌트：사용하십시오 stroke() 画布上 정확한 경로를 그리는 메서드。

JavaScript 문법：	context.lineTo(x,y);

参数值

参数	描述
x	路径的目标位置的 x 좌표。
y	路径的目标位置的 y 좌표。

온라인 예제

路径，L자형을 그립니다：

예제

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas lineTo() 메서드 사용-기본 가이드(oldtoolbag.com)</title>/<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
당신의 브라우저는 HTML을5　canvas 태그。
</canvas>
<script>
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();
</script>
</body>
</html>

테스트 보기 ‹/›

HTML canvas 참조 가이드

HTML: <template> 태그