试过了很多方法,还是没有达到图片中所示的效果。
我希望借助linear-gradient
来实现,参考:http://codepen.io/thebabydino/pen/hkxGp,只是目前没有思路。
问题更新
预期效果:整个灰色圆弧表示100。红色圆弧表示实际数字,长度与数字成正比
希望DOM结构简洁,如果linear-gradient不适合,就使用其他方法
按你的 code 稍微改了下~~~
我只想说 这重叠渐变 好难掌握
<div class='colorWheel'>
<div class="mask">45</div>
</div>
body { background: gainsboro; }
.colorWheel {
position: relative;
margin: 1em auto;
width: 16em; height: 16em;
border-radius: 50%;
background:
linear-gradient(36deg, #234 42.34%, transparent 42.34%) 0 0,
linear-gradient(72deg, #9ac147 75.48%, transparent 75.48%) 0 0,
linear-gradient(-36deg, #9ac147 42.34%, transparent 42.34%) 100% 0,
linear-gradient(-72deg, #9ac147 75.48%, transparent 75.48%) 100% 0,
linear-gradient(36deg, transparent 57.66%, #9ac147 57.66%) 100% 100%,
linear-gradient(72deg, transparent 24.52%, #9ac147 24.52%) 100% 100%,
linear-gradient(-36deg, transparent 57.66%, #234 57.66%) 0 100%,
linear-gradient(-72deg, transparent 24.52%, #9ac147 24.52%) 0 100%,
#9ac147 linear-gradient(#9ac147, #9ac147) 50% 100%;
background-repeat: no-repeat;
background-size: 50% 50%;
transition: 1s;
}
.colorWheel:hover {
transform: rotate(360deg);
}
.mask{
width:15rem;
height:15rem;
background:#fff;
border-radius:50%;
position:relative;
top:0.5rem;
left:0.5rem;
font-size:5rem;
text-align:center;
line-height:15rem;
}
图形绘制已经解决了。发现使用canvas绘图比较方便。jquery实现如下:
(function($){
$.fn.gauge=function(opts){
// merge with default setting
var cfg = $.extend({
scoreColor: '#fc9fb6',
totalColor: '#e1e9fa',
score: 0,
width: this.width(),
lineWidth: 20,
openAngle: 0,
id: 'gauge-'+Math.random().toString(36).substr(2, 4)
}, opts);
// insert canvas after div container
$('<canvas>'+ cfg.score +'</canvas>').attr({
id: cfg.id,
width: cfg.width,
height: cfg.height || cfg.width,
}).css({ margin: '0 auto', display: 'block' }).appendTo(this);
// convert degrees to radians
var radians_of = function(degrees) {
return degrees * Math.PI / 180;
};
// prepare for canvas drawing
var canvas = document.getElementById(cfg.id),
context = canvas.getContext('2d'),
x = canvas.width / 2,
y = canvas.height / 2,
radius = cfg.width / 2 - cfg.lineWidth,
openAngle = cfg.openAngle,
rangeAngle = cfg.score / 100 * ( 360 - 2 * cfg.openAngle );
// score range
var scoreArc = {
startAngle: 90 + openAngle,
endAngle: (90 + openAngle + rangeAngle)%360
}
// remained range
var remainArc = {
startAngle: scoreArc.endAngle,
endAngle: 90 - openAngle
}
// draw score
context.lineWidth = cfg.lineWidth;
context.beginPath();
context.arc(x, y, radius, radians_of(scoreArc.startAngle), radians_of(scoreArc.endAngle), false);
context.strokeStyle = cfg.scoreColor;
context.stroke();
// draw remaining
context.beginPath();
context.arc(x, y, radius, radians_of(remainArc.startAngle), radians_of(remainArc.endAngle),false);
context.strokeStyle = cfg.totalColor;
context.stroke();
// todo draw text
return this;
}
}(jQuery));
用法
<div id="canvas-container"></div>
<script>
$('#canvas-container').gauge({ score: 50, openAngle: 60, width: 300 });
</script>
代码比较粗糙,如有疏漏之处,恳请大家修正