logo标签列表

如何在HTML5画布上绘制圆柱形

htmlhtml5-canvas
3
我想在画布上绘制一个圆柱体，并带有控制框以重新调整圆柱体的大小。
4个回答
3

以下是我自己创建的用于回答自己问题的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();
}
你怎么调用这个函数？ - Rana Osama
1
谢谢！这正是我想要的。在将您的函数实现到我的代码中时，我进行了一些更改，如将画布上下文作为参数传递、简化数学计算并使代码通过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();
}
0
如果你想要绘制一个3D圆柱体，最简单的方法是使用像tQuery（http://jeromeetienne.github.com/tquery/）这样的库：
var world = tQuery.createWorld().boilerplate().start();
var object = tQuery. createCylinder().addTo(world);

如果您想要绘制一个“2D”圆柱体，可以使用画布2D API绘制一个矩形，然后在其顶部绘制一个椭圆形。它将呈现为一个圆柱体。
我尝试了后者的建议。但问题是如何将椭圆形放置在它和控制框上。 :-( - Kandy7
0
 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);
    }
不要绘制填充所有三角形。 - Piotr M
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接