自己写的一个少女心满满的canvasStar特效
Switch branches/tags
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
.idea 更换index.html Aug 1, 2017
README.md Create README.md Aug 1, 2017
canvasstar.js Initial commit Aug 1, 2017
index.html 更换index.html Aug 1, 2017

README.md

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>