Canvas でコーディングされたレーダー/スパイダー プロットに矢じりを追加しようとしています。PHP/SQL を使用していくつかのデータベース値を取得するため、キャンバスにプロットするために必要な JS のほとんどをエコーします。これまでのところ、軸 (7) とガイドライン (5 つの値) を描画しました。
矢印が正しく表示されるように矢印を回転させるにはどうすればよいですか。角度と 7 軸の端に?
function drawArrows(context){
context.beginPath();
context.strokeStyle = "#ccc";
context.lineWidth = 2;
context.save();
<?php
$arrowHoek = 35;
$cHoek = (360/7);
$arrowLength = 10;
for ($i = 1 ; $i < 8 ; $i++) {
$arrow_xleft = round((getCoordinates($i,6,x))-(sin(deg2rad($arrowHoek))*$arrowLength),2);
$arrow_yleft = round((getCoordinates($i,6,y))+(cos(deg2rad($arrowHoek))*$arrowLength),2);
$arrow_xright = round((getCoordinates($i,6,x))+(sin(deg2rad($arrowHoek))*$arrowLength),2);
$arrow_yright = $arrow_yleft;
$arrow_rotation = deg2rad(($cHoek*$i)-$cHoek);
echo "\tcontext.moveTo(";
getCoordinates($i,6,null);
echo ");\n";
echo "\tcontext.lineTo($arrow_xleft, $arrow_yleft);";
echo "\n\tcontext.moveTo(";
getCoordinates($i,6,null);
echo ");\n";
echo "\tcontext.lineTo($arrow_xright, $arrow_yright);\n";
echo "\tcontext.rotate($arrow_rotation);\n";
echo "\tcontext.restore();\n";
echo "\tcontext.save();\n";
}
?>
context.stroke();
}