HTML 参考手册

HTML 标签大全

HTML canvas lineJoin 属性

lineJoin 是 Canvas 2D API 用来设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）。

在线示例

当两条线相交时，创建一个圆角：

示例

<!DOCTYPE　html>
<html>
<head>
<title>HTML　canvas　lineJoin　属性的使用(基础教程网　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.lineJoin="round";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();
</script>
</body>
</html>

테스트를 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

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

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

정의 및 사용법

두 줄이 만나는 경우, lineJoin 속성이 생성된 모서리의 유형을 설정하거나 반환합니다.

주의:"miter" 값은miterLimit 속성의 영향.

기본 값:	miter
JavaScript 문법:	context.lineJoin="bevel\|round\|miter";

속성 값

값	설명
bevel	대각 모서리를 생성합니다.
round	원형 모서리를 생성합니다.
miter	기본 설정. 날카로운 모서리를 생성합니다.

HTML canvas 참조 매뉴얼

HTML: <template> 태그