Html5 canvas 水平自行车-帆布

我正在尝试创建水平圆柱体。我发现下面的链接是用来创建垂直圆柱体的

---

有人能告诉我创建水平圆柱体的更改吗

通常，如果要旋转图形，可以使用变换

变换移动、旋转（和缩放）画布，而无需重新编码所需的图形

演示：

此变换将原始图形旋转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();

}

---

谢谢缩放和变换之间的区别是什么？你为什么叫抽油缸（-w/2，-h/2，w，h）？“转换”是一个总括术语，包括context.rotate、context.scale和context.translate。所以比例是一种变换。translate（x，y）将画布的[0,0]坐标重置为[x，y]。由于您的绘图圆柱体从左上角开始绘制，

-w/2

和

-h/2

将圆柱体的中心推到0,0坐标。这样，圆柱体将围绕其中心点旋转，而不是围绕其左上角旋转。干杯马克：：）。如果我不想旋转圆柱体，我必须将度角替换为90’？为什么最后不使用context.closePath（）？使用此水平圆柱体，如何使用以下代码制作香肠形状（）。我想让圆看起来像）而不是右端的（）。是的，如果你只想让圆柱体处于90度==水平，只要画旋转的圆柱体（x，y，w，h，90）；顺便说一句，我刚才用你问题中的链接画了圆柱体。如果你想要一个像这样的形状（__;），上面和下面有线连接，那么画图就简单多了——只需要弧+线+弧+闭合路径：我想使用水平圆柱体代码，我只想删除右端的“（”来创建香肠形状。它应该看起来像（____;）。如果我使用二次曲线，那么曲线“”与圆柱体曲线不相似“。我必须运行180度而不是360度的循环吗？