【星蕴图】这个设计太棒了！
目录
一、背景
游戏作为第九艺术越来越炫酷了，各种花样引领行业进步。
第一次看到某游戏的技能图时，直呼“当初设计分类、树图时，怎么就没想到这么玩呢！跟不上时代的潮流了！”
我的技能图：
别人的技能图：
（百度图片-侵删）
没有对比就没有伤害！
太酷了，我也要给自己的网站整一个！
（抄过来，抄过来！）
二、代码实现
1、星空背景+动物轮廓图案直接使用图片：
美术好的大佬可以手绘轮廓线条，这里直接反色一张动物图片：（游戏里的画不出来）
2、星星
调用canvas圆形api填充实圆，从内向外渐变：
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
function drawArc(size) {
var gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.05 + size, '#fff');
gradient2.addColorStop(0.2 + size * 2, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.5 + size * 5, 'hsl(215, 80%, 32%)');
gradient2.addColorStop(1, 'transparent');
ctx.fillStyle = gradient2;
ctx.beginPath();
ctx.arc(half, half, half, 0, Math.PI * 2);
ctx.fill();
}效果不符合预期，层次过于分明且不能直接调整最外圈渐变渲染
3、优化
每颗星星由背景圆到中心圆颜色不变，透明度逐渐加深，在线参考
function rgba(triplet, opacity) {
let args = triplet.map(a => Math.round(Math.max(0, Math.min(a, 255))));
return `rgba(${args.join()},${opacity})`;
}
function gradient(opts) {
let gradient = context.createRadialGradient(opts.x, opts.y, opts.r, opts.x, opts.y, 0);
gradient.addColorStop(0, rgba(opts.color, 0));
gradient.addColorStop(1, rgba(opts.color, opts.opacity || 1));
context.fillStyle = gradient;
context.fillRect(opts.x - opts.r, opts.y - opts.r, opts.r * 2, opts.r * 2);
}
function star(opts) {
gradient({
x: opts.x,
y: opts.y,
r: opts.r * 8 * Math.random(),
color: opts.color,
opacity: opts.opacity * 0.1,
});
gradient({
x: opts.x,
y: opts.y,
r: opts.r * 4,
color: opts.color,
opacity: opts.opacity * 0.25,
});
gradient({
x: opts.x,
y: opts.y,
r: opts.r,
color: opts.color,
opacity: opts.opacity,
});
}效果还不错：
白色中心圆效果：
4、鼠标悬浮算法
也就是鼠标到圆心的距离小于半径.....
三、总结
大型游戏的设计太棒了，很多创意值得借鉴！
canvas的绘图api相对后端语言比较“傻瓜”式，绘图元素不宜过多，否则会卡顿；
完整代码GitHub
