適当CGプログラミング » Canvas辞典 »

線の端部分の形状の設定

線の端部分の形状の設定

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>

サンプル

Copyright © 1999-2006 Hikijishi All Rights Reserved.
[] [cgp][0.00187110900878906]