用数字绘制SVG看起来很混乱,但非常有用。通过修改他人的示例,我编写了一个Raphael.js函数,可以在60秒内绘制一个带有文本的圆形周围的粗绿线条。以下是JSFiddle表单中的示例,容器Div的背景为黑色,以显示圆形当前没有背景颜色:
http://jsfiddle.net/8NZfU/1/
以下是JS代码:
我想要的是在弧线内部圆形上创建白色背景的效果。我还想在弧线两侧添加静态细绿边框,以便看起来弧线正在两条线之间缓慢填充。
我尝试使用CSS或Raphael绘制此背景+边框,但没有成功。有人可以根据我的JSFiddle建议一个可行的方法吗?
//60s circular timer
function timer60s() {
var archtype = Raphael("canvas60s", 200, 200);
var set = archtype.set();
function drawCircle() {
var archtype = Raphael("canvas60s", 200, 200);
archtype.customAttributes.arc = function (xloc, yloc, value, total, R) {
var alpha = 360 / total * value,
a = (90 - alpha) * Math.PI / 180,
x = xloc + R * Math.cos(a),
y = yloc - R * Math.sin(a),
path;
if (total == value) {
path = [
["M", xloc, yloc - R],
["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
];
} else {
path = [
["M", xloc, yloc - R],
["A", R, R, 0, +(alpha > 180), 1, x, y]
];
}
return {
path: path
};
};
var my_arc = archtype.path().attr({
"stroke": "#339933",
"stroke-width": 10,
arc: [100, 100, 0, 100, 50]
});
my_arc.animate({
arc: [100, 100, 100, 100, 50]
}, 60000);
} //end drawCircle
drawCircle();
} // end timer60s
timer60s();
我想要的是在弧线内部圆形上创建白色背景的效果。我还想在弧线两侧添加静态细绿边框,以便看起来弧线正在两条线之间缓慢填充。
我尝试使用CSS或Raphael绘制此背景+边框,但没有成功。有人可以根据我的JSFiddle建议一个可行的方法吗?