강좌 & 팁
CanvasRenderingContext2D.lineJoin
설명
CANVAS 에 선과 선의 연결 부분의 모양을 지정한다.
분류
선 / 스타일
형태
DOMSting CanvasRenderingContext2D.lineJoin
적용 가능 값
round : 둥근 모양으로 연결된다.
bavel : 연결된 부분이 단면으로 남는다.
miter : 연결한 흔적이 남지 않는다.
기본값
miter
예제
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "black";
ctx.lineWidth = 10;
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo( 10, 10);
ctx.lineTo( 90, 10);
ctx.lineTo( 90, 90);
ctx.stroke();
ctx.lineJoin = "bevel";
ctx.beginPath();
ctx.moveTo( 110, 10);
ctx.lineTo( 190, 10);
ctx.lineTo( 190, 90);
ctx.stroke();
ctx.lineJoin = "miter";
ctx.beginPath();
ctx.moveTo( 210, 10);
ctx.lineTo( 290, 10);
ctx.lineTo( 290, 90);
ctx.stroke();
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="300" height="150"></canvas>
</body>
</html>
결과