javascript - 在 javascript 中向 CanvasRenderingContext2D 添加标记

Question

我正在使用 d3.js 和描述的 CanvasRenderingContext2D 对象 here 。我使用以下命令(在循环内)在 Canvas 上绘制一堆线条

g.beginPath();
g.moveTo(nx, ny);
g.lineTo(nx+= dx*scale, ny += dy*scale);
g.stroke();

我遇到的问题是我想在这些行的末尾添加箭头(或其他标记) - 如果使用这种方法创建路径，我不清楚如何(或是否)可以做到这一点。我发现如果我直接创建路径就可以完成，如这个example所示，但如果可能的话更愿意使用上面的 Context2d 方法。如何将标记添加到使用 Context2D 创建的每条路径的末尾？

Answer 1

这是向线条添加标记的一种方法。

我认为圆形是最简单的方法，这样我们就不必进行任何计算来确定 Angular 。

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
context.strokeStyle = "#000";
context.fillStyle = 'red';
context.lineWidth = 1;


function drawLine(data) {
  context.beginPath();
  context.moveTo(data[0].x, data[0].y);
  context.lineTo(data[1].x, data[1].y);
  context.stroke();
  context.beginPath();
  context.arc(data[1].x, data[1].y, 5, 0, Math.PI * 2);
  context.fill();
}

for (var i = 1; i < 5; i++) {
  drawLine([{ x: 0, y: 10 + i*10 }, { x: 200, y: 10 + i*30 }]);
}

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