【canvas】canvasで普通の矢印を描く（実線、破線）

canvasで普通の矢印を描きます。
ポイントは
・デザインに凝ってない単純な矢印。
・三角関数を使って任意の向きに。
・線の部分を破線にできる。

まずcanvasエリアを用意

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

1	<canvas id="canvas_view"></canvas>

矢印描画関数を作る

<script>
function draw_arrow(ctx, x1, y1, x2, y2, color, dash) {
  var ar_l = 20;
  
  ctx.beginPath();
  switch(dash) {
    case 'solid':
      ctx.setLineDash([]);
      break;
    case 'dashed':
      ctx.setLineDash([6, 4]);
      break;
  }
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.strokeStyle = color;
  ctx.lineWidth = 2;
  ctx.stroke();

  var dx = x2 - x1;
  var ax = Math.sign(dx);
  var dy = y2 - y1;
  var ay = Math.sign(dy);
  var len = Math.sqrt(dx * dx + dy * dy);
  var cos = Math.acos(dx / len) / Math.PI * 180;
  var sin = Math.asin(dy / len) / Math.PI * 180;

  var x2_a1 = x2 + ar_l * Math.cos((cos + ax * 150) * Math.PI / 180);
  var y2_a1 = y2 + ar_l * Math.sin((sin + ay * 150) * Math.PI / 180);
  var x2_a2 = x2 + ar_l * Math.cos((cos - ax * 150) * Math.PI / 180);
  var y2_a2 = y2 + ar_l * Math.sin((sin - ay * 150) * Math.PI / 180);

  ctx.beginPath();
  ctx.setLineDash([]);
  ctx.moveTo(x2, y2);
  ctx.lineTo(x2_a1, y2_a1);
  ctx.lineTo(x2_a2, y2_a2);
  ctx.lineTo(x2, y2);
  ctx.fillStyle = color;
  ctx.fill();
  ctx.strokeStyle = color;
  ctx.lineWidth = 1;
  ctx.stroke();
}
</script>

function draw_arrow(ctx, x1, y1, x2, y2, color, dash) {

var ar_l = 20;

ctx.beginPath();

switch(dash) {

case 'solid':

ctx.setLineDash([]);

break;

case 'dashed':

ctx.setLineDash([6, 4]);

break;

}

ctx.moveTo(x1, y1);

ctx.lineTo(x2, y2);

ctx.strokeStyle = color;

ctx.lineWidth = 2;

ctx.stroke();

var dx = x2 - x1;

var ax = Math.sign(dx);

var dy = y2 - y1;

var ay = Math.sign(dy);

var len = Math.sqrt(dx * dx + dy * dy);

var cos = Math.acos(dx / len) / Math.PI * 180;

var sin = Math.asin(dy / len) / Math.PI * 180;

var x2_a1 = x2 + ar_l * Math.cos((cos + ax * 150) * Math.PI / 180);

var y2_a1 = y2 + ar_l * Math.sin((sin + ay * 150) * Math.PI / 180);

var x2_a2 = x2 + ar_l * Math.cos((cos - ax * 150) * Math.PI / 180);

var y2_a2 = y2 + ar_l * Math.sin((sin - ay * 150) * Math.PI / 180);

ctx.beginPath();

ctx.setLineDash([]);

ctx.moveTo(x2, y2);

ctx.lineTo(x2_a1, y2_a1);

ctx.lineTo(x2_a2, y2_a2);

ctx.lineTo(x2, y2);

ctx.fillStyle = color;

ctx.fill();

ctx.strokeStyle = color;

ctx.lineWidth = 1;

ctx.stroke();

}

</script>

関数を呼ぶ

<script>
window.onload = function() {
  var canvas = document.getElementById('canvas_view');
  canvas.width = 300;
  canvas.height = 300;
  var ctx = canvas.getContext('2d');

  draw_arrow(ctx, 100, 100, 250, 200, 'red', 'solid');
  draw_arrow(ctx, 50, 150, 200, 50, 'blue', 'dashed');
}
</script>

window.onload = function() {

var canvas = document.getElementById('canvas_view');

canvas.width = 300;

canvas.height = 300;

var ctx = canvas.getContext('2d');

draw_arrow(ctx, 100, 100, 250, 200, 'red', 'solid');

draw_arrow(ctx, 50, 150, 200, 50, 'blue', 'dashed');

}

</script>

実行結果