在javascript中向CanvasRenderingContext2D添加标记[重复]答案

【问题标题】：Adding markers to CanvasRenderingContext2D in javascript [duplicate]在javascript中向CanvasRenderingContext2D添加标记[重复]
【发布时间】：2018-09-10 04:11:38
【问题描述】：

我正在使用 d3.js 和 here 描述的 CanvasRenderingContext2D 对象。我正在使用以下命令（在循环内）在画布上绘制一堆线

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

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

【问题讨论】：

标签： javascript d3.js canvas vector marker

【解决方案1】：

这是您可以在线条中添加标记的一种方法。

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

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 }]);
}

&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

【讨论】：