HTML 참조 매뉴얼

HTML 태그 전체

HTML canvas closePath() 메서드

closePath()는 Canvas 2D API는 현재 점에서 시작점으로 직선을 그리려고 시도하는 메서드입니다. 그래픽이 이미 닫혀 있거나 단일 점만 있으면 이 메서드는 어떤 작업도 수행하지 않습니다.

온라인 예제

L자 모양의 경로를 그리고 다시 시작점으로 이어지는 선을 그립니다：

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas closePath() 메서드 사용-기본 가이드(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.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>

테스트 봅시다 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

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

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

정의와 사용법

closePath() 메서드는 현재点到 시작점의 경로를 만듭니다.

주의사항：사용 stroke()메서드는 실제로 캔버스에서 경로를 그립니다.

주의사항：사용 fill() 메서드를 사용하여 이미지를 채우기(기본적으로 검은색입니다). 사용하십시오 fillStyle 속성을 사용하여 다른 색상을 채우기 위해/그레이드

JavaScript 문법：	context.closePath();

온라인 예제

파란색을 채우기 위해 사용하십시오：

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas closePath() 메서드 사용-기본 가이드(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.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="blue";
ctx.fill();
</script>
</body>
</html>

테스트 봅시다 ‹/›

HTML canvas 참조 매뉴얼

HTML: <template> 태그