Question

我正在使用画布创建圆柱体，我已根据百分比编码填充圆柱体（动画）。

当我在文本框中输入值时，它开始填写后退病房（填充）。但它必须在正面方向填充（绿色）圆柱顶部的样子。

如果我们改变cy值，填充方向会发生变化。任何建议/解决方案

这是Draw Cylinder代码

function draw() 
{
    ctx.clearRect(0, 0, canvasWidth, canvasHeight); 
    // draw grey main cylinder
   drawCylinder(cx, cy, width, height, height / 8, '#b1b1b1', '#000');
    // draw green progression cylinder
    var currHeight = someValue * height / 100;
    var newCenterY =  cy - currHeight / 2 + height / 2;     
    //Here is where green fill starts   
    drawCylinder(cx, newCenterY, width, currHeight, height / 4, '#81ae45', null);
    // draw (fill and stroke) the top of the progression cylinder
    drawCylinderTop(cx, newCenterY, width, 100, height / 4, '#9a9a9a', null);
   // stroke the top of the main cylinder
}

这是我的绘制圆柱的代码

function drawCylinder(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, w2, cpYtop, w2, ytop);
ctx.lineTo(w2, ybottom);
ctx.bezierCurveTo(w2, cpYbottom, -w2, cpYbottom, -w2, ybottom);
ctx.closePath();    
performDraw(fillStyle); 
ctx.restore();

}

如果我尝试将bezierCurveTo更改为静态值仍然没有改变。

我没有声称将确切的输出图像放到我想要的位置。

这是更新的小提琴链接。

我修改了以下代码行

var newCenterY =  cy + currHeight / 2 + height / 2;

以前是

var newCenterY =  cy - currHeight / 2 + height / 2;

我正在努力改变所需填充颜色的方向。

请做好必要的事。

Fiddle Link

提前致谢中号

Answer 1

我添加了另外一个功能两个改变填充方向

I have created one more function call drawCylinderprogress

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

此致马哈德

改变正面方向的填充颜色

1 个答案: