Question

我正在使用帆布圆柱体，当100％颜色必须填充100％时，我创建了圆柱体填充百分比值，但我看到顶部有一些微小差距。我尝试在自定义函数中添加一些属性drawCylinderprogress （）。

我创建了一条必须在曲线上的中心线（阈值）但是现在我可以看到直线我有以下代码。

这是代码

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');  
function myCurve(x,y, w, h, vRadius){ 
    context.translate(x,y);
    context.beginPath();
    context.moveTo(0,0);
    context.quadraticCurveTo(90,20,150,0);
    context.lineWidth = 3;
    context.strokeStyle = 'Orange';
    context.stroke();
    context.strokeStyle = '#000';
}
myCurve()

这是代码

function drawCylinderprogress(x, y, w, h, vRadius, fillStyle, strokeStyle) {
    var w2 = w / 2;
    var h2 = h / 2;
    var ytop = -h2;
    var cpYtop = -h2 - vRadius;
    var ybottom = h2;
    var cpYbottom = h2 + vRadius;
    ctx.save();     
    ctx.translate(x, y);    
    ctx.beginPath();    
    ctx.moveTo(-w2, ytop);  
    ctx.bezierCurveTo(-w2, cpYtop/360, w2, cpYtop/360 , w2 , ytop); 
    ctx.lineTo(w2, ybottom);
    ctx.bezierCurveTo(w2, cpYbottom, -w2, cpYbottom, -w2, ybottom);
    ctx.closePath();    
    performDraw(fillStyle); 
    ctx.restore();  
}

我又添加了一项条件检查

    if (h2 == 100)      
{
    //alert("checking");
    ctx.bezierCurveTo(-w2, cpYtop/3, w2, cpYtop/3, w2 , ytop);

}
else(h2 <= 100)
{
    //alert("checking 2");
    ctx.bezierCurveTo(-w2, cpYtop/360, w2, cpYtop/360, w2 , ytop);
}

如果我的h2 = = 100，但我得到了。但我仍然没有得到

我修改了ctx.bezierCurveTo（-w2，cpYtop / 360，w2，cpYtop / 360，w2，ytop）;此行到ctx.bezierCurveTo(-w2, cpYtop/3, w2, cpYtop/3 , w2 , ytop);

如果我给出20％的填充量，它看起来不像曲线，它看起来像直线

但是，如果我给出100％，它就会填满顶部。

我不明白为什么没有发生。请帮我解决上述问题

这是小提琴link。

在圆筒顶部看到一些间隙，帆布圆筒颜色没有填满100％

0 个答案: