满天星jQuery插件 html5 canvas一闪一闪的星

jquery-canvas-sparkles.js是一款生成canvas的jQuery插件，它生成的canvas是动态的一闪一闪的星星图。它能随意定义在一个元素dom里，它还能定义canvas的最小尺寸和最大尺寸，不光如此它还能定义星星出现的速度和数量，当然还有星星的颜色（支持同时定义N种颜色）。

在页面中引入jquery和jquery-canvas-sparkles.js文件

<script src="https://p.erlangyun.com/jQuery/jQuery3.3.1.js?v=a"></script>
<script src="dist/jquery-canvas-sparkles.min.js"></script>

body满屏基本使用方法

jQuery(function(){
   jQuery("body").sparkle({'count':500});
   jQuery("body").off("mouseover.sparkle").off("mouseout.sparkle").off("focus.sparkle").off("blur.sparkle");
   jQuery("body").trigger("start.sparkle");
});

插件的可用配置参数有

jQuery(function() {
    jQuery("body").sparkle({
        //颜色：接收HEX字符串，或者“rainbow”关键字，或一组HEX字符串
        color: ["#2eafea", "#e56604"],
        //一次显示星星的数量
        count: 30,
        // 距离canvas边部多少将会重叠
        overlap: 0,
        // 设置速度
        speed: 1,
        // 最小尺寸
        minSize: 4,
        // 最大尺寸
        maxSize: 7,
        //星星运动的方向，可以是"up", "down" 或 "both"
        direction: "both"
    });
});

还可以通过下面的事件来触发星星的开始、接收和改变尺寸

start.sparkle：触发星星开始闪烁。

stop.sparkle：结束星星闪烁。

resize.sparkle：动态修改canvas的尺寸，并改变星星的位置。

以上事件的例子

// 首先绑定一个dom
jQuery("body").sparkle();
 
//如果我们不希望默认事件触发，可以通过下面的方法阻止默认鼠标/键盘触发器
jQuery("body")
   .off("mouseover.sparkle")
   .off("mouseout.sparkle")
   .off("focus.sparkle")
   .off("blur.sparkle")
 
//还可以手动在元素上触发启动/停止事件
jQuery("body")
   .trigger("start.sparkle")
   .on("click", function() {
       jQuery(this).trigger("stop.sparkle");
   });
     
//当浏览器的窗口大小改变时，还可以调整画布的大小并重新定位
var timer;
jQuery(window).on("resize", function(){
   clearTimeout(timer);
   timer = setTimeout(function(){
       jQuery("body").trigger("resize.sparkle");
   },200);
});