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

Question

我想用控制框在画布上绘制一个圆柱体来调整圆柱体的大小。

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

Answer 2

谢谢！这正是我一直在寻找的。在我自己的代码中实现您的函数时，我进行了一些更改，例如将画布上下文作为参数传递，简化数学并让代码传递 JSLint。

function drawCylinder(ctx, x, y, w, h) {
    'use strict';
    var i, xPos, yPos, pi = Math.PI, twoPi = 2 * pi;

    ctx.beginPath();

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

        if (i === 0) {
            ctx.moveTo(xPos, yPos);
        } else {
            ctx.lineTo(xPos, yPos);
        }
    }
    ctx.moveTo(x, y + h / 8);
    ctx.lineTo(x, y + h - h / 8);

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

        if (i === 0) {
            ctx.moveTo(xPos, yPos);
        } else {
            ctx.lineTo(xPos, yPos);
        }
    }
    ctx.moveTo(x + w, y + h / 8);
    ctx.lineTo(x + w, y + h - h / 8);

    ctx.stroke();
}

Answer 3

如果要绘制 3D 圆柱体，最简单的方法是使用 tQuery（http://jeromeetienne.github.com/tquery/）之类的库：

var world = tQuery.createWorld().boilerplate().start();
var object = tQuery. createCylinder().addTo(world);

如果要绘制“2d”圆柱体，可以使用 canvas 2d API 绘制一个矩形，然后在其顶部绘制一个椭圆。它将显示为圆柱体。

Answer 4

 var canvas = document.getElementById('canvas')
    var ctx = canvas.getContext('2d');
    var pos={};
    const angleToRadian = function (angle) {
        return Math.PI / 180 * angle;
    }


    var Arc = function (x, y, r, d,s) {
        this.r = r;
        this.x = x;
        this.y = y;
        // this.d=d;

        ctx.beginPath();

        ctx.arc(x, y, r, angleToRadian(0), angleToRadian(180));
        ctx.moveTo((Number(x) + Number(r)), y);
        // ctx.lineTo((Number(x) + Number(r)), d);
        ctx.arc(x, y - d, r, angleToRadian(0), angleToRadian(360));
        ctx.moveTo((Number(x)+Number(r)),y);
        ctx.lineTo((Number(x)+Number(lX())), ((Number(y)-Number(d))+Number(r)-Number(lY())));
        // ctx.moveTo((Number(x)+Number(lX())), ((Number(y)-Number(d))-Number(lY())+Number(r)));
        ctx.lineTo((Number(x)+Number(lX())),(Number(y)+Number(r)-Number(lY())));
        // ctx.moveTo((Number(x)+Number(lX())),(Number(y)+Number(r)-Number(lY())));
        ctx.lineTo(Number(x), ((Number(y)+Number(r))-Number(d)));
        // ctx.moveTo(Number(x), ((Number(y)+Number(r))-Number(d)));
        ctx.lineTo(Number(x),(Number(y)+Number(r)));
        // ctx.moveTo(Number(x),(Number(y)+Number(r)));
        ctx.lineTo((Number(x)-Number(lX())), (Number(y)-Number(d)+Number(r)-Number(lY())));
        // ctx.moveTo((Number(x)-Number(lX())), (Number(y)-Number(d)+Number(r)-Number(lY())));
        ctx.lineTo((Number(x)-Number(lX())), (Number(y)+Number(r)-Number(lY())));
        // ctx.moveTo((Number(x)-Number(lX())), (Number(y)+Number(r)-Number(lY())));
        ctx.lineTo((Number(x)-Number(r)), (Number(y)-Number(d)));
        // ctx.moveTo((Number(x)-Number(r)), (Number(y)-Number(d)));
        ctx.lineTo((Number(x)-Number(r)), y);

        ctx.strokeStyle = "#9c3028";
        ctx.closePath();
        // ctx.stroke();
        ctx.fillStyle="#9b3028"
        ctx.fill();

    }


    var lY = function () {

        return Math.sqrt((Math.pow(((Math.cos(67.5 * Math.PI / 180) * this.r) * 2), 2) -
            Math.pow((Math.cos(22.5 * Math.PI / 180) * (Math.cos(67.5 * Math.PI / 180) * this.r) * 2), 2)));


    }
    var lX = function () {
        return Math.sqrt((Math.pow(((Math.cos(67.5 * Math.PI / 180) * this.r) * 2), 2) - (Math.pow(((Math.cos(67.5 * Math.PI / 180) * this.r) * 2), 2) -
            Math.pow((Math.cos(22.5 * Math.PI / 180) * (Math.cos(67.5 * Math.PI / 180) * this.r) * 2), 2))));
    }

    document.addEventListener('mouseup',mouseUp);
    document.addEventListener('mousedown',mouseDown);
    document.addEventListener('mousemove',draw);

    function mouseDown(e){
        pos.x=e.clientX;
        pos.y=e.clientY;

    }
    function mouseUp(e){
        pos.pozX=e.clientX;
        pos.pozY=e.clientY;

    }
    function draw(e){
        if(e.buttons!==1) return;
        ctx.clearRect(0,0,500,500);
       Arc(pos.x, pos.y, e.clientY, e.clientX);
    }