javascript - 绘制两个半圆，错误的填充点

Question

我正在制作一些非常简单的 ui(健康/能量)栏，我决定使用由两半圆(红色/蓝色)制成的径向栏。为了计算两半的 Angular ，我使用了非常简单的工具:

var radians = function(angle) {
    return (Math.PI / 180) * angle;
};

我可以像这样画每一半:

ctx.arc(cvs_wc, cvs_hc, 15, radians(270), radians(90);
ctx.arc(cvs_wc, cvs_hc, 15, radians(90), radians(270);

这样我就可以毫无问题地很好地画左半边和右半边了。

然而，当我想为其应用填充时，我看到它们在两个半 Angular 点(开始半 Angular 和结束半 Angular )之间填充。看起来不太好，我该如何修改代码，使填充始终从圆心开始，而不是从一半开始。

DEMO FIDDLE

Answer 1

添加 ctx.moveTo();/ctx.lineTo(); 它会起作用。

/* General Settings ----> */

    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');
    var cvs_w = cvs.width = window.innerWidth;
    var cvs_h = cvs.height = window.innerHeight;
    var cvs_wc = cvs_w / 2;
    var cvs_hc = cvs_h / 2;

/* <---- General Settings */



/* Math Tools ----> */

    var radians = function(angle) {
        return (Math.PI / 180) * angle;
    };
    
    var percent_of = function(current, max) {
    	return (current / max) * 100;
    };
    
    var percent_from = function(percent) {
    	return 180 * (percent / 100);
    };

/* <---- Math Tools */

var max_cd = 100;
var current_cd = 50;

var max_hp = 100;
var current_hp = 50;

/* Game Loop ----> */

	var animate = function() {
    	ctx.clearRect(0, 0, cvs_w, cvs_h);
    
    	if(current_cd < max_cd) { current_cd += 0.5; } else { current_cd = 0; }
        if(current_hp < max_hp) { current_hp += 0.5; } else { current_hp = 0; }
        
        /* Cooldown UI */
            var cd_percent = percent_of(current_cd, max_cd);
            var angle_from_cd = percent_from(cd_percent);

            ctx.beginPath();
            ctx.moveTo(cvs_wc,cvs_hc);
            ctx.arc(cvs_wc, cvs_hc, 15, radians(90), radians(90 + angle_from_cd));
            ctx.lineTo(cvs_wc,cvs_hc);
            ctx.strokeStyle = 'blue';
            ctx.lineWidth = 3;
            ctx.stroke();
            ctx.fillStyle = 'lightblue';
            ctx.fill();
            
            
        
        /* Health UI */
        	var hp_percent = percent_of(current_hp, max_hp);
            var angle_from_hp = percent_from(hp_percent);

            ctx.beginPath();
            ctx.moveTo(cvs_wc,cvs_hc);
            ctx.arc(cvs_wc, cvs_hc, 15, radians(270), radians(270 + angle_from_hp));
            ctx.lineTo(cvs_wc,cvs_hc);
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 3;
            ctx.stroke();
            ctx.fillStyle = 'orange';
            ctx.fill();
            

        window.requestAnimationFrame(animate);
    };
    
    window.requestAnimationFrame(animate);

/* <---- Game Loop */

canvas {
    position: absolute;
    top: 0;
    left: 0;
}

<canvas id="cvs"></canvas>