HTML5用画布绘图，旋转线？答案

【问题标题】：HTML5 Drawing with canvas, rotate line?HTML5用画布绘图，旋转线？
【发布时间】：2014-12-29 06:21:49
【问题描述】：

从事一个开源项目，我们有 HTML5 画布旋转适用于图像和文本 - 但我无法弄清楚形状有什么不同。

源文件：https://github.com/kageurufu/FaceMaker/blob/master/js/facemaker.render.js

第 239 行：

  case FM.ShapeTypes.square:
  case FM.ShapeTypes.line:
    //As far as I can tell, a line is just a rect, and a square is really a rect
    if (layer.shape_opt === 0) {
      c.fillRect(x, y, fm.parseInt(layer.width), fm.parseInt(layer.height));
    } else {
      c.strokeRect(x, y, fm.parseInt(layer.width), fm.parseInt(layer.height));
    }

这可以通过提供的变量来绘制动态线宽：x,y,width,height。

但是，我们有一个 0..360 的旋转变量，如果 > 0 则需要应用它。对于图像和字体，我们在第 298 行像这样旋转画布：

c.save();
c.translate(x, y);
c.rotate(rotation * (Math.PI / 180));
// draw here
c.restore();

但是...我不知道如何用线条来做到这一点。我在这里阅读了其他相关问题 - 但不了解如何调整形状的原点。

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

围绕中心点旋转一条线：

计算线的边界框：minX,minY,maxX,maxY
平移到边界框中心点： translate( minX+(maxX-minX)/2, minY+(maxY-minY)/2 )
随意旋转
首先取消旋转然后取消平移画布进行清理。

【讨论】：