在画布中旋转箭头答案

【问题标题】：rotating an arrow in canvas在画布中旋转箭头
【发布时间】：2010-09-29 06:58:17
【问题描述】：

我想将箭头旋转到任何给定的角度。我需要添加/修改什么，以便它可以旋转到任何角度。目前是 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();

 }

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

假设您希望旋转中心为(cx,cx)，则在context.save(); 语句之后插入以下三行。

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

这将使箭头顺时针旋转angle（以弧度为单位）。

您在代码中使用(cx,cx) 来锚定箭头。如果你真的是说(cx,cy)，那就相应地调整上面的sn-p。

【讨论】：