水平圆柱 - 画布

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();

}