HTML 참조 매뉴얼

HTML 태그 전체 목록

HTML canvas beginPath() 메서드

beginPath()는 Canvas 2D API는 서브 경로 목록을 비우고 새로운 경로를 시작하는 메서드입니다. 새로운 경로를 만들고자 할 때, 이 메서드를 호출합니다.

온라인 예제

화면에 두 가지 경로를 그립니다; 녹색과 파란색:

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas beginPath() 메서드 사용-기본 튜토리얼(oldtoolbag.com)</<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.lineWidth="5";
ctx.strokeStyle="green";　　//　녹색 길
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke();　　//　그리기　
ctx.beginPath();
ctx.strokeStyle="purple";　　//　파란 길
ctx.moveTo(50,0);
ctx.lineTo(150,130);　　　　　　　　　　　　
ctx.stroke();　　//　그리기
</script>
</body>
</html>

테스트를 통해 확인하십시오 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

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

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

정의 및 사용법

beginPath() 메서드는 새로운 경로를 시작하거나 현재 경로를 초기화합니다.

안내:이 메서드를 사용하여 경로를 생성하십시오 moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 및 arc()。

안내:이를 사용하십시오 stroke() 캔버스 위에서 정확한 경로를 그리는 메서드.

JavaScript 문법:	context.beginPath();

HTML canvas 참조 가이드

HTML: <template> 태그