Question

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

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

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

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

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

在JavaScript中将标记添加到CanvasRenderingContext2D

1 个答案: