HTML 참조 매뉴얼

HTML 태그大全

HTML: <template> 태그

HTML canvas lineCap 속성

lineCap은 Canvas 2D API는 각 선 끝을 어떻게 그릴지 지정하는 속성입니다. 총3가능한 값이며 각각은：butt, round and square입니다. 기본 값은 butt입니다.

HTML canvas 참조 가이드

在线示例

画三条带有（butt，round，square）端盖的线：

JavaScript：

예제

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas lineCap 속성의 사용(기본 튜토리얼 웹 site oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 태그.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth =　10;
ctx.lineCap = "butt";
ctx.moveTo(20,　20);
ctx.lineTo(200,　20);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(20,　40);
ctx.lineTo(200,　40);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "square";
ctx.moveTo(20,　60);
ctx.lineTo(200,　60);
ctx.stroke();
</script>
</body>
</html>

테스트해 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 및 Safari는 lineCap 속성을 지원합니다.

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

정의 및 사용법

lineCap 속성은 선의 끝盖 스타일을 설정하거나 반환합니다.

주의:"round" 및 "square" 값은 선이 약간 더 길어집니다.

기본 값:	butt
JavaScript 문법:	context.lineCap="butt\|round\|square";

속성 값

값	설명
butt	기본 설정. 선의 각 끝에 평평한边缘를 추가합니다.
round	선의 각 끝에 원형 선캡을 추가합니다.
square	선의 각 끝에 정方形 선캡을 추가합니다.

HTML canvas 참조 가이드

HTML: <template> 태그