線の端部分の形状の設定
lineCap
解説
lineCapを使用すればデフォルトの線の端の形状を設定することが出来ます。
- lineCap
- 線の端の形状を指定することで、その後のstroke系メソッドのデフォルトの線の端の形状が設定されます。
- 「round」の場合、線の端の形が丸になります。
- 「square」の場合、線の端の形が四角になります。
ソースコード
<html>
<head>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
function sbLineCap() {
elmCv = document.getElementById('cv');
ctxCv = elmCv.getContext('2d');
ctxCv.lineWidth = 10;
//Text 1
ctxCv.beginPath();
ctxCv.moveTo(50,30);
ctxCv.lineTo(350,40);
ctxCv.lineTo(200,70);
ctxCv.stroke();
//Text 2
ctxCv.lineCap = 'butt';
ctxCv.beginPath();
ctxCv.moveTo(50,90);
ctxCv.lineTo(350,100);
ctxCv.lineTo(200,130);
ctxCv.stroke();
//Text 3
ctxCv.lineCap = 'round';
ctxCv.beginPath();
ctxCv.moveTo(50,150);
ctxCv.lineTo(350,160);
ctxCv.lineTo(200,190);
ctxCv.stroke();
//Text 4
ctxCv.lineCap = 'square';
ctxCv.beginPath();
ctxCv.moveTo(50,210);
ctxCv.lineTo(350,220);
ctxCv.lineTo(200,250);
ctxCv.stroke();
}
window.onload = sbLineCap;
</script>
</head>
<body>
<canvas id="cv" width="400" height="400"></canvas>
</body>
</html>