Zeichnung zwei Hälften des Kreises, falscher Füllpunkt

Question

Ich mache einige sehr einfache ui (Gesundheit/Macht) bar, entschied ich mich für radiale Balken aus zwei Hälften des Kreises (rot/blau) gehen. Um Winkel für beide Hälften zu berechnen verwende ich sehr einfaches Werkzeug:

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

und ich kann jede Hälfte wie folgt zeichnen:

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

So kann ich gut und rechte Hälfte ohne Probleme links ziehen kann .

jedoch, wenn ich für sie eine Füllung anwenden wollte, sah ich, dass sie zwischen den beiden Punkten der Hälfte füllen (Halbwinkel beginnen und Halbwinkel am Ende). Es sieht nicht sehr gut aus, wie kann ich den Code ändern, so wird das Füllen immer in der Kreismitte beginnen und dann den Anfangspunkt der Hälfte.

DEMO FIDDLE

Answer 1

ctx.moveTo();/ctx.lineTo(); hinzufügen und es wird funktionieren.

/* 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) { 
 
    \t return (current/max) * 100; 
 
    }; 
 
    
 
    var percent_from = function(percent) { 
 
    \t return 180 * (percent/100); 
 
    }; 
 

 
/* <---- Math Tools */ 
 

 
var max_cd = 100; 
 
var current_cd = 50; 
 

 
var max_hp = 100; 
 
var current_hp = 50; 
 

 
/* Game Loop ----> */ 
 

 
\t var animate = function() { 
 
    \t ctx.clearRect(0, 0, cvs_w, cvs_h); 
 
    
 
    \t 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 */ 
 
     \t 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>