function gradientColor(len, color) {
color = color || [147, 112, 219];
var delta = 0.8 / len;
function colorTransfer(c, o) {
var bg = [255,255,255];
return '#'+c.map(function(t,i) {return parseInt((1-o)*bg[i] + o*t).toString(16)}).join('');
}
return new Array(len).join(',').split(',').map(function(o,i) {
return colorTransfer(color, 1 - i * delta);
})
}
比较温馨的做法是透明度并不是从 100% -> 0%,而是预留了 20% 的基值。
最终效果
处理完以上三个关键的问题之后其实这道题的代码已经出来了。由于要增加点击事件,我使用g标签将同一个圆弧和其对应的text标签包起来做成一个group,而后对每一个组增加了点击事件。由于 SVG 实际上可以看成一个一个的 DOM 标签,所以点击事件处理起来也是非常的得心应手的。最后附上我的最终代码和效果:
你可以参考一下canvas时钟的实现方法。可以有些启发吧。基本思路是利用rotate,可以简单一些。自己算sin也行,就是稍微麻烦点。
这个东西倒是挺有创意的,有空我也弄一个,嘿嘿
实现了一个:几个问题,字没有正过来显示,如果要正过来显示得用sin去算;颜色搞了很久,最后用hsl搞了;点击不去做了,不想算鼠标位置,如果是我的话,我会考虑用svg实现事件
既然
canvas
的答案都有了正好最近在学习svg
我就来写一个svg
的答案吧。SVG 如何画任意角度的圆弧线
将这个问题分解出来就是我们要画一个一个的弧块,所以第一步我们需要了解"如何使用SVG画弧线"。关于 SVG 的Path参数了解大家可以去参考一下 张鑫旭老师的博文:《深度掌握SVG路径path的贝塞尔曲线指令》。不过我们需要的 arc 命令并没有给出,这里我就稍作说明一下:
使用
也就是说画一段弧线你必须给定:
总共 7 个参数,怪复杂的。其它参数都比较好理解,就是

large-arc-flag
这个参数似乎不太明白的样子,这里我引用一张 MDN 文档 中的图片给大家做一下参考:实在是不太明白也没有关系,反正就 4 种情况,大家试试也就试出来了。针对这个问题的情况下,因为我们画的是圆弧,所以椭圆直接变成了圆,2 - 5 这 4 条参数都能解决了,剩下的是我们只需要知道弧的起点和终点就好了。这个根据圆弧的角度我们也是可以利用公式计算出来的。这里我画了一个示意图给大家参考一下:

也就是说假设已知圆心坐标和圆心半径,逆时针方向角度为正值。则圆弧α的起点 A 和终点 B 的坐标我们都能知道了。所以控制一段圆弧通用的指令应该是:
举个例子,假设圆心坐标为 (100,100),半径为 50,则我们画一个 30° 角的圆弧为:
http://jsfiddle.net/hvaomwe0/
我们可以将其化作一个 JS 函数以便动态创建:
http://jsfiddle.net/wwrxwLuc/2/
如何处理弧线标注位置
SVG本身是有
marker
用来指定其他元素用来做标注的,不过用起来稍微麻烦最终还是需要用到text
标签,所以我就直接用text
标签来做了。text
标签需要指定标签左下角的 (x,y) 坐标来确定标签的位置,为了达到好看的效果,通过计算弧中点的坐标将其旋转到其切线方向会达到很好看的效果。弧重点的坐标利用上一步中求终点的方法可以非常简单拿到。而旋转到切线方向其实就是将文字旋转弧线的角度。text
也是支持 transform属性 的,和平常在 CSS 中一样也是支持rotate
等一些常用的变换的。但这里需要注意的是,默认的rotate
并不是以文字的左下角做旋转,所以我们要在旋转角度后面定义旋转中心坐标,也就是transform = "rotate(α x y)"
。这样做完之后有个未完成的地方在于由于不是按照文字中心做的运算,所以你必须左下移动文字宽高的一半才能到达中心。我将这一步的过程封装成了
svg.prototype.appendCircleArcText
方法做了一个DEMO:http://jsfiddle.net/wwrxwLuc/3/
如何处理渐变色
这个问题我不是很清楚标准的解决办法,但是我的第一反应是利用 alpha通道 来做。利用透明通道能过非常简单的给出一个颜色的渐变出来。但是透明通道有个我们不需要的功能就是透明效果,所以需要将透明过的颜色处理成普通颜色。这一步过程其实非常简单了,代码就是以下这样的:
比较温馨的做法是透明度并不是从 100% -> 0%,而是预留了 20% 的基值。
最终效果
处理完以上三个关键的问题之后其实这道题的代码已经出来了。由于要增加点击事件,我使用
g
标签将同一个圆弧和其对应的text
标签包起来做成一个group
,而后对每一个组增加了点击事件。由于 SVG 实际上可以看成一个一个的 DOM 标签,所以点击事件处理起来也是非常的得心应手的。最后附上我的最终代码和效果:http://jsfiddle.net/wwrxwLuc/5/embedded/result/
我来提供一个用p + CSS实现的版本,效果截图如下。
难点在于用p实现圆弧,这里使用了
SASS
以及Compass
(主要使用其中的tan()
和sin()
函数)。圆弧效果参见:http://codepen.io/yuezk/pen/gbMEwy
具体做法是用边框实现三角形,然后用父级元素将上方的两个角覆盖掉。
最终效果参见:http://codepen.io/yuezk/pen/pvbGrX
不足之处在于:
其实一个圆环是一个圆形,然后小圆覆盖在上面,根据鼠标点击的位置去判断点了哪里,我是这么想的
小E呢通过大神的指导,和询问了一些同学之后终于做出来了,所以呢,我把我现在的成品拿出来~~,谢谢P_chou和Fackship两位大神的帮助!!!