canvas lineJoinとlineCapのプロパティをJavaScriptで

Question

リストからオプションを選択したときにlineJoinとlineCapを更新する方法を教えてください。 jsの中

https://jsfiddle.net/7cao1r1b/

<select name="line" id="line" onchange="handleUpdate()"> 
    <option value="round" checked>round</option> 
    <option value="miter">miter</option> 
</select> 

：

function handleUpdate() { 
    const option = document.querySelector('select').value; 
    ctx.strokeStyle = this.value; 
    ctx.lineWidth = this.value; 
    ctx.lineJoin = option; 
    ctx.lineCap = option; 
    console.log(option); 
} 

Answer 1

ctx.lineJoinが唯一参加していパスに適用されるオプション。

例えば

ctx.beginPath(); // begins a new path. there is no join from the previous path possible 
    ctx.moveTo(100,100); 
    ctx.lineTo(100,200; 
    // adding a move to means that the lines above is not joined to the one below 
    ctx.moveTo(100,200); 
    ctx.lineTo(200,200); 
    ctx.stroke(); 

は、前のmoveTo

ctx.beginPath(); 
    ctx.moveTo(100,100); 
    ctx.lineTo(100,200; 
    ctx.lineTo(200,200); // a join 
    ctx.stroke(); 

にバックラインに参加する線分間のmoveToかにbeginPathを使用しないことにより、パスセグメントに参加し、密接なパスを使用する必要があるたlineJoinオプションを使用するには

スニペットでlineCapを正しく使用しています