通過畫布繪製量表圖

Question

我可以通過畫布使用功能arc()繪製量表圖。但是，形狀是一半的圓圈。

現在，我想繪製這樣的圖表（請忽略顏色或數字）。

我怎麼能畫呢？感謝

UPDATE：

我通過繪製2弧繪製圖表（我不使用ctx.lineWidth）

var min=Math.PI*.60; 
var max=Math.PI*2+Math.PI*.40; 
var R = 100; 
var arcWidth = 40; 
var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(100, 100, R-arcWidth, max, min, true); 
ctx.arc(100, 100, R, min, max); 
ctx.fillStyle = "red"; 
ctx.fill(); 

http://jsfiddle.net/b0nw4gma/

然而，在min和max位置，圖表是而不是一輪。我試圖使用ctx.lineCap='round'，但它不起作用。

Answer 1

只需根據您所需的量表百分比掃描一個具有掃描角度的弧線。

在您的例子的0％角是（估計...）

PI * 0.60 

和您的100％角度（再次估計...）

PI*2 + PI*.40 

所以你的弧始終始於角度= PI * 0.60。

你的電弧將在這樣計算的廣角端：

zeroAngle + (hundredAngle-zeroAngle) * guagePercentageValue 

這裏的示例代碼和演示：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var PI=Math.PI; 
 
var PI2=PI*2; 
 
var cx=150; 
 
var cy=150; 
 
var r=80; 
 
var min=PI*.60; 
 
var max=PI2+PI*.40; 
 
var percent=50; 
 

 
ctx.lineCap='round'; 
 
ctx.font='24px verdana'; 
 
ctx.textAlign='center'; 
 
ctx.textBaseline='middle'; 
 
ctx.fillStyle='gray'; 
 

 
$myslider=$('#myslider'); 
 
$myslider.attr({min:0,max:100}).val(50); 
 
$myslider.on('input change',function(){ 
 
    percent=parseInt($(this).val()); 
 
    drawGuage(); 
 
}); 
 

 
drawGuage(); 
 

 
function drawGuage(){ 
 
    ctx.clearRect(0,0,cw,ch); 
 
    // draw full guage outline 
 
    ctx.beginPath(); 
 
    ctx.arc(cx,cy,r,min,max); 
 
    ctx.strokeStyle='lightgray'; 
 
    ctx.lineWidth=15; 
 
    ctx.stroke(); 
 
    // draw percent indicator 
 
    ctx.beginPath(); 
 
    ctx.arc(cx,cy,r,min,min+(max-min)*percent/100); 
 
    ctx.strokeStyle='red'; 
 
    ctx.lineWidth=6; 
 
    ctx.stroke(); 
 
    ctx.fillText(percent+'%',cx,cy); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input id=myslider type=range><br> 
 
<canvas id="canvas" width=300 height=300></canvas>