卧式自行车帆布

Question

我试着创造水平圆柱体。我已经找到了下面的链接，这是用来创建垂直圆柱。

How to draw a cylinder on html5 canvas

有人能告诉我发生的变化来创建一个水平的圆筒吗？

Answer 1

通常，如果有要旋转的绘图，则可以使用转换。

转换画布的移动、旋转(和缩放)，而不需要对所需的绘图进行重新编码。

演示：http://jsfiddle.net/m1erickson/RU26r/

此转换将使原始绘图旋转90度：

drawRotatedCylinder(100,100,50,30,90);

function drawRotatedCylinder(x,y,w,h,degreeAngle){

  // save the context in its unrotated state
  context.save();

  // translate to the rotation point
  // your object will rotate around the rotation point
  // so if you want it to rotate from the center then 
  // translate to x+width/2, y+height/2

  context.translate(x+w/2,y+h/2);

  // rotate by 90 degrees
  // rotate() takes radians, so convert to radians
  // with radians==degrees*Math.PI/180

  context.rotate(degreeAngle*Math.PI/180);

  // draw your original shape--no recoding required!

  drawCylinder(-w/2,-h/2,w,h);

  // restore the context to its untransformed state

  context.restore();

}