htmlとjavascriptを使用して、webブラウザ上に以下のような12通りの方向と長さを持つ矢印を描こうと考えています。
canvasというツールでこれが可能でしょうか？
方法等ご教示いただければ助かります。
また、他に便利な描画ツールがあればご教示いただければ幸いです。

説明：
・矢印をマウスで摘まんだまま、特定の方向に伸ばすと4通りの方向に向けて3段階の長さの矢印を作成します。
・黒丸は、その箇所までカーソルを伸ばせば矢印の長さが変更されるポイントです。（画面上では表示されません）
・真ん中をクリックすると簡単なコメントを入力できるようにしたいです。

背景：マリンスポーツをしており、自分の海域の風向や風速をweb上で共有することで、どの海域で、何名の人が楽しんでいるのか？海上の様子は？等を共有して、マリンスポーツの普及を考えています。
（google mapに投稿者の位置情報を表示させることには成功しています。DBと連携し、マリンスポーツを楽しむ人のリアルタイム情報を共有しようと考えています）

右方向大きさ１

右方向大きさ２

右方向大きさ３

行動規範の内容に同意します

回答1件

ベストアンサー

canvasやsvgで実現可能です

sample

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  var list=[
4    ["130","160"],
5    ["80" ,"160"],
6    ["30" ,"160"],
7    ["160","130"],
8    ["160", "80"],
9    ["160", "30"],
10    ["190","160"],
11    ["240","160"],
12    ["290","160"],
13    ["160","190"],
14    ["160","240"],
15    ["160","290"],
16    ];
17  var count=0;
18  var timerId=setInterval(()=>{
19    var l=document.querySelector('#line');
20    l.setAttribute("x2",list[count][0]);
21    l.setAttribute("y2",list[count][1]);
22    count++;
23    if(count>=list.length) count=0;
24    console.log(count);
25  },500);
26});
27</script>
28
29<svg width="360" height="360" id="svg">
30<marker id="arrow" viewBox="-5 -5 10 10" orient="auto">
31<polygon points="-5,-5 5,0 -5,5" fill="skyblue" stroke="none" />
32</marker>
33<line id="line" x1="160" y1="160" x2="130"  y2="160" stroke="skyblue" stroke-width="15" marker-end="url(#arrow)" />
34<circle cx="10"  cy="160" r="3" fill="black" />
35<circle cx="60"  cy="160" r="3" fill="black" />
36<circle cx="110" cy="160" r="3" fill="black" />
37<circle cx="160" cy="160" r="3" fill="black" />
38<circle cx="210" cy="160" r="3" fill="black" />
39<circle cx="260" cy="160" r="3" fill="black" />
40<circle cx="310" cy="160" r="3" fill="black" />
41<circle cx="160" cy="10"  r="3" fill="black" />
42<circle cx="160" cy="60"  r="3" fill="black" />
43<circle cx="160" cy="110" r="3" fill="black" />
44<circle cx="160" cy="210" r="3" fill="black" />
45<circle cx="160" cy="260" r="3" fill="black" />
46<circle cx="160" cy="310" r="3" fill="black" />
47</svg>
48
49