一、背景

游戏作为第九艺术越来越炫酷了，各种花样引领行业进步。

第一次看到某游戏的技能图时，直呼“当初设计分类、树图时，怎么就没想到这么玩呢！跟不上时代的潮流了！”

我的技能图：

别人的技能图：

（百度图片-侵删）

没有对比就没有伤害！

太酷了，我也要给自己的网站整一个！

~~（抄过来，抄过来！）~~

二、代码实现

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