如何绘制圆形轮廓的百分比
How to draw a percentage of an outline of a circle
我想在多个圆周围画一条线,但只画一个百分比。具体来说,我需要动态输入特定的百分比来绘制这些圆,所以我目前的起始和结束角度方法会引起问题:
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 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();
});
参见评论;)
文档:
http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/
相关文章:
- 如果宽度是百分比,如何设置以px为单位的图像高度
- 使用javascript可以设置css动画的当前百分比
- 当我使用高度百分比时,谷歌地图javascript api不会显示
- Javascript差异百分比数学
- 我如何使脚本使用百分比
- 根据元素高度和宽度的百分比变化增加或减少字体大小
- 在Javascript中计算并显示具有2个税收百分比的现有总值
- d3使用样式Tween的百分比转换
- 计算HTML表TD中两个数字之间的百分比
- 如何从二进制int中获取百分比,每个位表示x%
- 百分比计算错误
- CSS将百分比转换为像素
- 计算输入的每个单词组合的百分比
- 使用百分比、类别名称和箭头渲染标签
- gruntjs理解语法-<%=小于百分比符号
- 计算条形图百分比
- 如何使用jquery/javascript跟踪下载百分比
- 如何将CSS背景位置属性从百分比转换为像素
- 灯箱类型的东西,使图像成为浏览器高度的百分比
- 如何绘制圆形轮廓的百分比