Как удалить пунктирную линию из контекста HTML

Чтобы нарисовать пунктирную линию в контексте холста, я использую этот

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

Когда я не хочу рисовать более пунктирные линии, я делаю это.

    ctx.setLineDash([0]);

Удаление тире работает в настольных браузерах, но это не работает в мобильном Safari. Есть ли другой способ удалить тире и провести сплошную сплошную линию?

Спасибо

Ответ 1

Оберните свой код внутри context.save/context.restore

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

// now the default solid line is restored

Ответ 2

Вы можете передать пустой массив. Это также делает линию сплошной.

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>

Ответ 3

Я постараюсь объяснить как можно проще: