canvasで普通の矢印を描きます。
ポイントは
・デザインに凝ってない単純な矢印。
・三角関数を使って任意の向きに。
・線の部分を破線にできる。
まずcanvasエリアを用意
|
1 |
<canvas id="canvas_view"></canvas> |
矢印描画関数を作る
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<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> |
関数を呼ぶ
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
実行結果