html - 如何在html5 canvas上绘制圆柱体

Question

我想在 Canvas 上绘制一个带有控制框的圆柱体来调整圆柱体的大小。

Answer 1

这是我为回答自己的问题而创建的一些 javascript 代码:

function drawCylinder ( x, y, w, h ) {
  context.beginPath(); //to draw the top circle
  for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.001) {

    xPos = (this.x + this.w / 2) - (this.w / 2 * Math.sin(i)) * 
      Math.sin(0 * Math.PI) + (this.w / 2 * Math.cos(i)) * 
      Math.cos(0 * Math.PI);

    yPos = (this.y + this.h / 8) + (this.h / 8 * Math.cos(i)) * 
      Math.sin(0 * Math.PI) + (this.h / 8 * 
      Math.sin(i)) * Math.cos(0 * Math.PI);

    if (i == 0) {
      context.moveTo(xPos, yPos);

    } 
    else
    {
      context.lineTo(xPos, yPos);
    }
  }
  context.moveTo(this.x, this.y + this.h / 8);
  context.lineTo(this.x, this.y + this.h - this.h / 8);

  for (var i = 0 * Math.PI; i < Math.PI; i += 0.001) {
    xPos = (this.x + this.w / 2) - (this.w / 2 * Math.sin(i)) * Math.sin(0 * Math.PI) + (this.w / 2 * Math.cos(i)) * Math.cos(0 * Math.PI);
    yPos = (this.y + this.h - this.h / 8) + (this.h / 8 * Math.cos(i)) * Math.sin(0 * Math.PI) + (this.h / 8 * Math.sin(i)) * Math.cos(0 * Math.PI);

    if (i == 0) {
      context.moveTo(xPos, yPos);

    } 
    else 
    {
      context.lineTo(xPos, yPos);
    }
  }
  context.moveTo(this.x + this.w, this.y + this.h / 8);
  context.lineTo(this.x + this.w, this.y + this.h - this.h / 8);            
  context.stroke();
}