Холст, как установить черту линии?

Question

Я просто хочу нарисовать пунктирную линию холстом с помощью lineDash [1,1]. Я нашел функцию setLineDash, теоретически, которая может это сделать. Но я не могу заставить его работать и не могу понять, как работает эта функция.

AFAIK, функция setLineDash принимает аргумент, который является массивом. Например, setLineDash([1,1]) должен установить длину тире на 1 и длину пространства на 1. Но это не так. Он просто рисует сплошную линию.

Пожалуйста, посмотрите на фрагмент ниже.

const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
canvas.width = 300
canvas.height = 300

ctx.lineWidth = 3
ctx.strokeStyle = 'red'

drawLine([1, 1], 25)
drawLine([2, 2], 50)
drawLine([3, 3], 75)
drawLine([4, 4], 100)
drawLine([5, 5], 125)
drawLine([6, 6], 150)
drawLine([7, 7], 175)
drawLine([8, 8], 200)
drawLine([9, 9], 225)

function drawLine(lineDash, y) {
  ctx.beginPath()
  ctx.setLineDash(lineDash)
  ctx.moveTo(200, y)
  ctx.lineTo(100, y)
  ctx.closePath()
  ctx.stroke()
}

<canvas id="myCanvas"></canvas>

Answer 1

Наконец, я обнаружил, что виновником является порядок ctx.closePath() и ctx.stroke(). Я позвонил ctx.stroke() после закрытия пути, чтобы результат пошёл не так. Измените порядок вызова функции, и он будет работать как положено.

const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
canvas.width = 300
canvas.height = 300

ctx.lineWidth = 3
ctx.strokeStyle = 'red'

drawLine([1, 1], 25)
drawLine([2, 2], 50)
drawLine([3, 3], 75)
drawLine([4, 4], 100)
drawLine([5, 5], 125)
drawLine([6, 6], 150)
drawLine([7, 7], 175)
drawLine([8, 8], 200)
drawLine([9, 9], 225)

function drawLine(lineDash, y) {
  ctx.beginPath()
  ctx.setLineDash(lineDash)
  ctx.moveTo(200, y)
  ctx.lineTo(100, y)
  ctx.stroke()
  ctx.closePath()
}

<canvas id="myCanvas"></canvas>

Answer 2

Попробуйте

1002 *

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.setLineDash([1, 1]);
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(200, 100);
ctx.stroke();

<canvas id='canvas' width='350px' height='300px'></canvas>