javascript - 使用 javascript 更新 Canvas lineJoin 和 lineCap 属性

Question

从列表中选择选项时如何更新 lineJoin 和 lineCap？

https://jsfiddle.net/7cao1r1b/

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

在js中:

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();

要使用 linejoin 选项，您需要在线段之间不使用 moveTo 或 beginPath 来连接路径段，并使用 close path 将线连接回上一个 moveTo

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

在您的代码片段中，您正确使用了 lineCap