HTML5Canvas彩色水晶洞穴特效

彩色光感的水晶洞穴特效，用的是 HTML5 Canvas 打造的动态场景，整体效果蛮梦幻的。你可以用标签定义画布，再用getContext('2d')拿到 2D 上下文，后面各种绘制、填充、渐变都靠它。

洞穴结构主要靠路径绘图，像moveTo()、lineTo()、arc()这些组合用法。想模拟晶体那种透亮感，渐变和透明度是关键。createLinearGradient()、createRadialGradient()两个方法，搭配addColorStop()用起来灵活。

光照和立体感呢，可以试试加点阴影效果，用shadowBlur、shadowColor一调，马上立起来了。整个场景还挺适合加点动画，requestAnimationFrame()用来搞定循环刷新，搭配粒子系统，让水晶碎片缓缓飘动，有味道。

交互这块也考虑到了，鼠标移动或者点击都能触发变化，响应也快，体验不错。建议你下载下源码包texiao8247_1560680973看看，整体结构清晰，逻辑也挺好懂的，适合拿来学习或改改做你自己的特效。

如果你对 Canvas 的渐变、动画、粒子交互这些感兴趣，可以顺手看看html5Canvas 绘制 2D 背景 2和左右翻转 2D 动画这两个例子，也挺有参考价值的。