したがって、達成する必要がある基本的なアイデアは、0 度から 360 度までの単純な円を作成することです。
その円の中に 2 つの矢印があります。円の中で回転させる必要があります。
指定された角度に達するまで、1 つの矢印を 1 度ごとに回転させる必要があります。もう一方はその角度に直接行く必要があります。
したがって、矢印は両方とも 0 度から始まり、100 度に移動するように指定した場合、一方の矢印は即座にジャンプして 100 度を指し、もう一方の矢印は徐々に 100 度になります。
編集：
私のスタックオーバーフローのスキル不足について申し訳ありません（質問に質問を含めたことがないことに気づきました...）。そのため、スタックオーバーフローに関する別の質問を通じて、以前にキャンバスで単純な矢印を取得することができましたが、実際に矢印を回転させることを検討し始めたとき、コードで迷子になりました。
私の質問はこれだったと思います: ユーザーが選択した度数に基づいて、2 つの矢印に回転を適用するにはどうすればよいですか?
だから、これが私が矢を作ることができたものです：
<html>
<head>
</head>
<body>
<canvas id="c" width="500" height="500"></canvas>
<script langauage="javascript">
<!--
ctx = document.getElementById("c").getContext("2d");
ctx.beginPath();
canvas_arrow(ctx,50,50,100,50);
canvas_arrow(ctx,50,50,10,30);
ctx.stroke();
function canvas_arrow(context, fromx, fromy, tox, toy){
var headlen = 10; // length of head in pixels
var dx = tox-fromx;
var dy = toy-fromy;
var angle = Math.atan2(dy,dx);
context.moveTo(fromx, fromy);
context.lineTo(tox, toy);
context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
context.moveTo(tox, toy);
context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));
}
-->
</script>
</body>
</head>
矢印は問題ありませんが、一方を回転させ、もう一方を目的の角度値にジャンプさせるのは難しいと思います。ユーザーが指定した次数の値に基づいてそれらを動かす方法の例やアイデアが見つかりません。