canvasstar's Introduction

canvasStar

自己写的一个少女心满满的canvasStar特效

使用 canvasstar.js

在 HTML 中创建 canvas 元素

使用需要在 html 中加入 id 为 canvas 的 canvas，并且需要自己写好 canvas的样式

引用 `canvasstar.js` 文件

引用的 canvasstar.js 必须在 canvas 元素之后

创建对象并调用

创建一个新的CanvasStar对象，并且使用CanvasStar.init()调用即可

<script>
    var CanvasStar = new CanvasStar;
    CanvasStar.init();
</script>

修改默认参数

如果有需要，可以更改默认参数默认参数如下：

    /*
     * @para star_r：star半径系数，系数越大，半径越大
     * @para star_alpha：生成star的透明度，star_alpha越大，透明度越低
     * @para initStarsPopulation：初始化stars的个数
     * @para move_distance：star位移的距离，数值越大，位移越大
     * @para dot_r : dot半径系数，系数越大，半径越大
     * @para dot_speeds : dots运动的速度
     * @para dot_alpha : dots的透明度
     * @para aReduction：dot消失条件，透明度小于aReduction时消失
     * @para dotsMinDist：dot最小距离
     * @para maxDistFromCursor：dot最大距离
     *
     * */
    var config = {
        star_r : 3,
        star_alpha : 5,
        initStarsPopulation : 150,
        move_distance : 0.25,
        dot_r : 5,
        dot_speeds : 0.5,
        dot_alpha : 0.5,
        dot_aReduction : 0.01,
        dotsMinDist : 5,
        maxDistFromCursor : 50,
    };

如需修改，在CanvasStar.init()时传入对象的参数

<script>
    var CanvasStar = new CanvasStar;
    var conf = {
        star_r : 10,
        star_alpha : 50,
        initStarsPopulation : 10,
        move_distance : 0.65,
        dot_r : 7,
        dot_speeds : 5,
        dot_alpha : 0.5,
    };
    CanvasStar.init(conf);
</script>

canvasstar's Issues

~A~

逛掘金的时候看到帖子，点开git一看大佬居然是个妹纸。。。求互粉求加好友TAT。。。

佩服妹子能写出这么牛逼的Canvas效果

先膜拜一下妹子

提几点建议

代码应该精简
既然都用到构造函数了，那就应该把draw和cache里面绘制圆点的代码封装成一个原型链上的函数。
绘制多点之间连线的代码也可以通过循环来精简。另外在”点“对象代码中，有一些冗余的context属性设置，比如alpha等等。还可以考虑将Star和Dot的关系整合成父子继承关系，优化代码结构和提高性能。
配置项可以扩展
可以多设置些配置项，这样能够更好体现个性化。比如：颜色，多点连线的条数。
颜色值，可以放入配置中，这样不用局限于默认的白色。多点之间连线的条数，可以方便用循环代码来实现。不用像现在这样，写出毫无扩展性的代码。
扩展思维
在重绘函数drawIfMouseMoving中，是否可以考虑通过判断用户鼠标移动方向来设置Variable这样的偏移值方向，而不是目前这种随机方向。