çemberin iki yarısını çiziyor, yanlış dolum noktası

Question

Çok basit bir UI (sağlık/güç) çubuğu yapıyorum, iki daire yarısından (kırmızı/mavi) yapılmış radyal çubuğa gitmeye karar verdim. iki yarısı için açıları hesaplamak için ben çok basit bir aracı kullanmak:

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

Ve ben böyle her yarım çizebilirsiniz: sorunsuz

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

bu i güzel sol çizebilirsiniz yolu ve sağ yarım . Bununla birlikte, bunun için bir dolgu uygulamak istediğimde, bunların her iki yarısı arasında (yarım açı ve bitiş yarı açısı) dolduğunu gördüm. Çok güzel görünmüyor, kodu nasıl değiştirebilirim, böylece doldurma her zaman daire merkezinde değil, daha sonra yarım başlangıç ​​noktasıyla başlar.

DEMO FIDDLE

Answer 1

ctx.moveTo();/ctx.lineTo(); ekleyin ve işe yarayacak.

/* 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>