javascript - 如何在 Canvas 中绘制具有适当坐标的箭头

Question

我使用下面的代码行绘制了曲线，我需要绘制一个箭头。为此，我需要绘制 2 strip 有某个 Angular 线并将其旋转某个 Angular 。画起来很困惑。我正在关注 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>