如何在画布中绘制具有适当坐标的箭头

Question

我已经使用下面的代码行绘制了曲线，我需要绘制一个箭头。为此，我需要绘制 2 条带某个角度的线并将其旋转某个角度。画起来非常混乱。我正在关注为箭头提供的link 中的帖子。

.html

<canvas id = "canvas" width = "100px" height = "120px"></canvas>

.ts

  arrow({ x: 10, y: 10 }, { x: 100, y: 140 }, 15); //function called on reload.

  function arrow(p1, p2, size) {
  var angle = Math.atan2((p2.y - p1.y), (p2.x - p1.x));

  //curve line
  ctx.strokeStyle = 'white';      
  ctx.beginPath();      
  ctx.lineWidth=3;     
  ctx.moveTo(40,0);     
  ctx.bezierCurveTo(30, 0, -70, 75, 100, 150);
  ctx.lineTo(100,120)         
  ctx.stroke();

 //to draw a triangle ??

}

Answer 1

我试着看起来像

arrow({ x: 10, y: 10 }, { x: 100, y: 140 }, 15); //function called on reload.

  function arrow(p1, p2, size) {
  var angle = Math.atan2((p2.y - p1.y), (p2.x - p1.x));
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
  //curve line
ctx.fillStyle = "";
ctx.fillRect(0,0,200,200);
  ctx.strokeStyle = 'white';      
  ctx.beginPath();      
  ctx.lineWidth=3;     
  ctx.moveTo(40,20);     
  ctx.bezierCurveTo(30,40, -0,110, 100, 149.5);
  ctx.moveTo(100,150.6);
  ctx.lineTo(82,133);
ctx.stroke();
  ctx.moveTo(100,149.7);
  ctx.lineTo(76,146);
ctx.stroke();
 //to draw a triangle ??
  }

<canvas id = "canvas" width = "150px" height = "300px"></canvas>