線結合部分の尖らせ設定
miterLimit
解説
デフォルトの線の結合部分の形状が「miter」に指定されていた場合に使われる設定です。
miterLimitを使用すれば、どれくらいまで鋭い結合部分が許されるのかを設定することが出来ます。
- lineJoin
- 線の結合部分の鋭さの度合いを指定することで、その度合いを超えない場合のみ結合部分が鋭くなります。
ソースコード
<html><head><!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--><script type="text/javascript">
function sbMiterLimit() {elmCv = document.getElementById('cv');ctxCv = elmCv.getContext('2d');ctxCv.lineWidth = 10;ctxCv.lineJoin = 'miter';//Text 1ctxCv.beginPath();ctxCv.moveTo(50,30);ctxCv.lineTo(350,40);ctxCv.lineTo(200,70);ctxCv.stroke();//Text 2ctxCv.miterLimit = 0;ctxCv.beginPath();ctxCv.moveTo(50,90);ctxCv.lineTo(350,100);ctxCv.lineTo(200,130);ctxCv.stroke();//Text 3ctxCv.miterLimit = 5;ctxCv.beginPath();ctxCv.moveTo(50,150);ctxCv.lineTo(350,160);ctxCv.lineTo(200,190);ctxCv.stroke();//Text 4ctxCv.miterLimit = 10;ctxCv.beginPath();ctxCv.moveTo(50,210);ctxCv.lineTo(350,220);ctxCv.lineTo(200,250);ctxCv.stroke();}window.onload = sbMiterLimit;
</script></head><body><canvas id="cv" width="400" height="400"></canvas></body></html>