目录

 

一、背景

二、代码实现

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