如何从 HTML 上下文中删除虚线答案

【问题标题】：How to remove dashed line from HTML context如何从 HTML 上下文中删除虚线
【发布时间】：2014-11-05 07:27:27
【问题描述】：

要在画布上下文中绘制虚线，我使用这个

    var canvas = document.getElementById('canv');
    ctx = canvas.getContext('2d');        
    ctx.setLineDash([5]);

当我不想画更多的虚线时，我会这样做。

    ctx.setLineDash([0]);

删除破折号适用于桌面浏览器，但这不适用于移动版 Safari。还有其他方法可以删除破折号并绘制简单的连续实线吗？

谢谢

【问题讨论】：

标签： javascript html canvas mobile-safari

【解决方案1】：

您可以传递空数组。它还可以使线条成为实线。

ctx.setLineDash([])

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

ctx.setLineDash([5, 3]);
ctx.strokeRect(20, 20, 150, 100);


button.onclick = () => {
  ctx.clearRect(15, 15, 200, 200);
  ctx.setLineDash([]);
  ctx.strokeRect(20, 20, 150, 100);
}

<!DOCTYPE html>
<html>

<body>

  <button id='button'>Unset Dashed Line</button><br>
  <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>


</body>

</html>

【讨论】：

这比公认的答案要好得多。保存和恢复上下文的成本很高，而且在场景中是一种浪费。

【解决方案2】：

将您的代码封装在 context.save / context.restore 中

ctx.save();
ctx.setLineDash([5]);
// draw dashed stuff
ctx.restore();

// now the default solid line is restored

【讨论】：

它可能有效，但将其包装在更复杂的算法中并不总是实用的。所以确实会选择@Denis-kreshikhin 的答案。
@PauloBueno。我同意。在我回答时，我不知道[] 会清除破折号——或者在丹尼斯回答之前的一年里，这个选项可能不可用。无论如何，如果没有设计理由来 .save/.restore 画布状态，我现在将使用 [] 清除破折号。感谢您的提醒。 :-)

【解决方案3】：

我会尽量简单地解释：

【讨论】：