HTML 5 Canvas，旋转一切

Question

我制作了一个圆柱规，与此非常相似：

使用大约7个左右的函数绘制...我的有点不同。它是非常容易的，我可以设置颜色，透明度，高度，宽度，是否显示％文本和许多其他选项。但现在我需要同样的东西，但所有旋转90度，以便我可以设置高度长度和宽度低，以产生更像这样的东西：

我找到了ctx.rotate，但是没有任何东西它的所有形状都崩溃了.. ctx.save/restore似乎什么也没做，我试着把它放在每个形状绘图功能中。我尝试修改，例如，drawOval函数，以便在水平设置为1时首先旋转画布;但它似乎每次迭代都会旋转它，即使有保存/恢复......所以顶部圆柱会旋转，底部会旋转两次或者其他东西。很难说出真正发生的事情。我究竟做错了什么？我不想复制所有这些代码并花费数小时来定制它，只是为了生产我已经拥有的东西但是转向水平。尔格！帮助

Answer 1

选项1

要旋转所有内容，只需将变换应用于元素本身：

canvas.style.transform = "rotate(90deg)";         // or -90 depending on need
canvas.style.webkitTransform = "rotate(90deg)";

选项2

在绘制任何内容之前和使用任何save（）之前旋转上下文。与CSS版本不同，您首先需要转换为居中，然后旋转，最后转换回来。

在执行此操作之前，您需要确保交换画布的宽度和高度。

ctx.translate(ctx.canvas.width * 0.5, ctx.canvas.height * 0.5);    // center
ctx.rotate(Math.PI * 0.5);                                         // 90°
ctx.translate(-ctx.canvas.width * 0.5, -ctx.canvas.height * 0.5);

当然，作为选项3，您可以重新计算所有值以沿着另一个轴运行。

Answer 2

查看此示例中的rotate函数。您希望对要旋转的点进行平移。

example1();
example2();

function rotate(ctx, degrees, x, y, fn) {
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(degrees * (Math.PI / 180));
  fn();
  ctx.restore();
}

function rad(deg) {
  return deg * (Math.PI / 180);
}

function example2() {
  var can = document.getElementById("can2");
  var ctx = can.getContext('2d');
  var w = can.width;
  var h = can.height;

  function drawBattery() {
      var percent = 60;
    
      ctx.beginPath();
    
      ctx.arc(35,50, 25,0,rad(360));
      ctx.moveTo(35+percent+25,50);
      ctx.arc(35+percent,50,25,0,rad(360));
      ctx.stroke();
    
      ctx.beginPath();
      ctx.fillStyle = "rgba(0,255,0,.5)";
      ctx.arc(35,50,25,0,rad(360));
      ctx.arc(35+percent,50,25,0,rad(360));
      ctx.rect(35,25,percent,50);
      ctx.fill();
          
      ctx.beginPath();
      ctx.lineWidth = 2;
      ctx.strokeStyle = "#666666";
      ctx.moveTo(135,25);
      ctx.arc(135,50,25, rad(270), rad(269.9999));
      //ctx.moveTo(35,75);
      ctx.arc(35,50,25,rad(270),rad(90), true);

      ctx.lineTo(135,75);
      ctx.stroke();
  }
  
  drawBattery();

  can = document.getElementById("can3");
  ctx = can.getContext('2d');
  w = can.width;
  h = can.height;
  rotate(ctx, -90, 0, h, drawBattery);
}


function example1() {
  var can = document.getElementById('can');
  var ctx = can.getContext('2d');
  var color1 = "#FFFFFF";
  var color2 = "#FFFF00";
  var color3 = "rgba(0,155,255,.5)"
  var text = 0;

  function fillBox() {
    ctx.save();
    ctx.fillStyle = color3;
    ctx.fillRect(0, 0, can.width / 2, can.height);
    ctx.restore();
  }

  function drawBox() {
    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle = ctx.fillStyle = color1;
    ctx.rect(10, 10, 50, 180);
    ctx.font = "30px Arial";
    ctx.fillText(text, 25, 45);
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = color2;
    ctx.lineWidth = 10;
    ctx.moveTo(10, 10);
    ctx.lineTo(60, 10);
    ctx.stroke();
    ctx.restore();
  }

  fillBox();
  rotate(ctx, 90, can.width, 0, fillBox);

  text = "A";
  drawBox();
  color1 = "#00FFFF";
  color2 = "#FF00FF";
  text = "B";
  rotate(ctx, 90, can.width, 0, drawBox);

  centerRotatedBox()

  function centerRotatedBox() {

    ctx.translate(can.width / 2, can.height / 2);
    for (var i = 0; i <= 90; i += 10) {
      var radians = i * (Math.PI / 180);
      ctx.save();
      ctx.rotate(radians);
      ctx.beginPath();
      ctx.strokeStyle = "#333333";
      ctx.rect(0, 0, 50, 50)
      ctx.stroke();
      ctx.restore();
    }
  }

}

#can,
#can2,
#can3 {
  border: 1px solid #333333
}

<canvas id="can" width="200" height="200"></canvas>
<canvas id="can2" width="200" height="100"></canvas>
<canvas id="can3" width="100" height="200"></canvas>