Javascript 如何绘制圆轮廓的百分比
我想在多个圆圈周围画一条线,但只画一个百分比。具体来说,我需要动态输入特定的百分比来绘制这些圆,因此我当前的开始和结束角度方法导致了问题:Javascript 如何绘制圆轮廓的百分比,javascript,html,Javascript,Html,我想在多个圆圈周围画一条线,但只画一个百分比。具体来说,我需要动态输入特定的百分比来绘制这些圆,因此我当前的开始和结束角度方法导致了问题: var data = [ {id:'firefox', angle:90-90}, {id:'chrome', angle:144}, {id:'ie', angle:72}, {id:'opera', angle:28.8}, {id:'safari', angle:7.2} ]; data.forEach(func
var data = [
{id:'firefox', angle:90-90},
{id:'chrome', angle:144},
{id:'ie', angle:72},
{id:'opera', angle:28.8},
{id:'safari', angle:7.2}
];
data.forEach(function(e){
var canvas = document.getElementById(e.id);
var context = canvas.getContext('2d');
context.beginPath();
context.arc(64, 64, 60, 1.5*Math.PI, e.angle, true);
context.lineWidth = 8;
context.lineCap = "round";
context.strokeStyle = '#c5731e';
context.stroke();
});
见评论;)
文件:
见评论;)
文件:
你能打个招呼吗?这里-只想在某个地方指定一个%来画线。我一直在处理一些事情,所以你可以看到var数据是不同的,你能给一个jsFiddle吗?这里-只想在某个地方指定一个%来画线。我一直在摆弄一些东西,所以你可以看到var数据是不同的
var data = [
{id:'firefox', percent:100},
{id:'chrome', percent:50},
{id:'ie', percent:25},
{id:'opera', percent:33.33},
{id:'safari', percent:66.66}
];
data.forEach(function(e){
var canvas = document.getElementById(e.id);
var context = canvas.getContext('2d');
var startAngle = 1.5 * Math.PI; //Top of the arc
var endAngle = (2 * Math.PI) / 100 * e.percent; //"2 * PI" = 360°
//and "/ 100 * e.percent" = e.percent%
context.beginPath();
context.arc(64, 64, 60, startAngle, startAngle - endAngle, true);
//substract(!) end from start, because we are going ANTIclockwise!
context.lineWidth = 8;
context.lineCap = "round";
context.strokeStyle = '#c5731e';
context.stroke();
});