キャンバスでレーダープロットの矢頭を回転させる

Question

キャンバスでコード化されたレーダー/スパイダープロットに矢頭を追加しようとしています。 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(); 
} 

Answer 1

私はそれを試したようです！他のトピックで見られるように、これはsave（）、translate（）、rotate（）およびrestore（）関数を使用します。これを別のJavascript関数に入れると、他の図面を邪魔することなく個々のCanvasパーツに変換することができます。

解決策は以下のとおりです（これは、JavaScriptを使用してJavaScript関数をエコーし​​ます）。

function drawArrows(context){ 
context.beginPath(); 
context.strokeStyle = "#ccc"; 
context.lineWidth = 2; 
<?php 
$arrowHoek = 35; 
$cHoek = (360/7); 
$arrowLength = 10; 

for ($i = 1 ; $i < 8 ; $i++) { 
    $arrow_xleft = -(sin(deg2rad($arrowHoek))*$arrowLength); 
    $arrow_yleft = (cos(deg2rad($arrowHoek))*$arrowLength); 
    $arrow_xright = (sin(deg2rad($arrowHoek))*$arrowLength); 
    $arrow_yright = $arrow_yleft; 
    $arrow_rotation = deg2rad(($cHoek*$i)-$cHoek); 

    echo "\tcontext.save();\n"; 
    echo "\tcontext.translate(";  
    getCoordinates($i,6,null); 
    echo ");\n"; 
    echo "\tcontext.rotate($arrow_rotation);\n"; 
    echo "\tcontext.moveTo($arrow_xleft, $arrow_yleft);"; 
    echo "\n\tcontext.lineTo(0,0);\n"; 
    echo "\tcontext.lineTo($arrow_xright, $arrow_yright);\n"; 
    echo "\tcontext.restore();\n"; 
} 
?> 
context.stroke(); 
} 

• 注：コンテキストとキャンバス要素の宣言は、コンテナ関数です。