通过画布绘制量表图

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>