вращение стрелки на холсте

Question

Я хочу повернуть стрелку на любой заданный угол. Что мне нужно добавить / изменить так, чтобы его можно было повернуть на любой угол. В настоящее время его на 180 градусов.

function drawArrowAtAngle(cx,cy,angle,context){
  context.save();
  context.beginPath();
  context.lineWidth = 1;
  context.strokeStyle = '#aaa';
  context.moveTo(cx+25,cx-2);
  context.lineTo(cx-55,cx-2);
  context.lineTo(cx-58,cx);
  context.lineTo(cx-55,cx+2);
  context.lineTo(cx+25,cx+2);
  context.lineTo(cx+25,cx-2);  
  context.stroke();
  context.closePath();
  context.restore();

 }

Answer 1

Предполагая, что вы хотите, чтобы центр вращения был (cx,cx), вставьте следующие три строки после оператора context.save();.

  context.translate(cx,cx) ;
  context.rotate(angle) ;
  context.translate(-cx,-cx) ;

Это приведет к повороту стрелки по часовой стрелке на angle (в радианах).

Вы используете (cx,cx) в своем коде для привязки стрелки.Если вы действительно имеете в виду (cx,cy), то откорректируйте приведенный выше фрагмент соответствующим образом.