【星蕴图】这个设计太棒了！
目录
一、背景
二、代码实现
1、星空背景+动物轮廓图案直接使用图片：
2、星星
3、优化
4、鼠标悬浮算法
三、总结
一、背景
游戏作为第九艺术越来越炫酷了，各种花样引领行业进步。
第一次看到某游戏的技能图时，直呼“当初设计分类、树图时，怎么就没想到这么玩呢！跟不上时代的潮流了！”
我的技能图：
别人的技能图：
（百度图片-侵删）
没有对比就没有伤害！
太酷了，我也要给自己的网站整一个！
（抄过来，抄过来！）
二、代码实现
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
【星蕴图】这个设计太棒了！
目录
一、背景
二、代码实现
1、星空背景+动物轮廓图案直接使用图片：
2、星星
3、优化
4、鼠标悬浮算法
三、总结
一、背景
游戏作为第九艺术越来越炫酷了，各种花样引领行业进步。
第一次看到某游戏的技能图时，直呼“当初设计分类、树图时，怎么就没想到这么玩呢！跟不上时代的潮流了！”
我的技能图：
别人的技能图：
（百度图片-侵删）
没有对比就没有伤害！
太酷了，我也要给自己的网站整一个！
（抄过来，抄过来！）
二、代码实现
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