我可以用功能arc()
的画布绘制仪表图表。但是,形状是圆的一半。
现在,我想像这样绘制彩色图表(请忽略颜色或数字)。
我该如何画画?感谢
更新:
我通过绘制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();
但是,在min
和max
的位置,图表是行而不是圆形。我尝试使用ctx.lineCap='round'
,但它不起作用。
答案 0 :(得分:2)
根据您所需的标准百分比,只扫描一个具有扫掠角的圆弧。
在您的示例中,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>