参加方法は？

Question

私は時間の間に幅を変える曲線/形状を描く必要があります。だから私は時間ごとに各ラインを描き、各チャンクの幅を変える必要があります。しかし、これを行うと、線の間に隙間ができます。ここ

単一にbeginPath /ストロークでexample（行は自動的に接合されている）：

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
ctx.beginPath 
ctx.strokeStyle='#cc0000'; 
ctx.lineWidth=10; 
ctx.moveTo(10,10); 
ctx.lineTo(50,50); 
ctx.lineTo(100,60); 
ctx.stroke(); 

とhere代わりIがライン毎に幅を変えることができる形状の各部分（のためにbeginPath /脳卒中、 ）私はこの問題を解決する一回：

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
ctx.beginPath; 
ctx.strokeStyle='#cc0000'; 
ctx.lineWidth=10; 
ctx.moveTo(10,10); 
ctx.lineTo(50,50); 
ctx.stroke(); 
ctx.beginPath; 
ctx.strokeStyle='#cc0000'; 
ctx.lineWidth=10; 
ctx.moveTo(50,50); 
ctx.lineTo(100,60); 
ctx.stroke(); 

あなたが最後の例で見ることができるように、2つのライン間のギャップがあります。 どうすれば修正できますか？

ctx.lineCap = "round"; 

これは、よりスムーズなオーバーラップを可能にし、「半分」円と線分を延長します：

Answer 1

あなたはキャップのレンダリング方法を変更することができます。

Fiddle