createjs规则表面特效-html代码-BFW代码库

createjs规则表面特效

代码语言：html

所属分类：粒子

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> [createjs]ruled_surface</title>
    <style>
        * {
            margin: 0;
        }
        body {
            background-color: #000;
        }
        canvas#myCanvas {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body translate="no">
    <script src='http://repo.bfw.wiki/bfwrepo/js/createjs.min.js'></script>
    <div class="canvas">
        <canvas id="myCanvas" width="900" height="600"></canvas>
    </div>

    <script>


        window.addEventListener('load', init);
        window.addEventListener('load', handleResize); //ロード時リサイズをかける
        var radian = 120;
        var stage;
        var max = 0;
        var min = 8;
        var random = Math.floor(Math.random() * (max - min + 1))
        function init() {
            stage = new createjs.Stage('myCanvas');

            var curves = new Curves(-1);
            stage.addChild(curves);

            var curves_b = new Curves(-1);
            // curves_b.x += radian*6;
            stage.addChild(curves_b);


            createjs.Ticker.addEventListener("tick", stage);
            createjs.Ticker.timingMode = createjs.Ticker.RAF;

            window.addEventListener('resize', handleResize, false);
            stage.update();

        }


        //線の座標クラス
        class Line extends createjs.Shape {
            constructor(x1, y1, x2, y2, x3, y3, i, color) {
                super();
                // 円を作成します
                this.graphics.beginStroke(color).setStrokeStyle(.3).moveTo(x1, y1);
                var cmd = this.graphics.lineTo(x1, y1).command;
                createjs.Tween.get(cmd, {
                    loop: true
                })
                .wait(i*10)
                .to({
                    x: x2+Math.random(), y: y2+Math.random()}, 4000, createjs.Ease.cubicOut)
                .wait(2000+i*10)
                .to({
                    x: x1, y: y1
                }, 4000, createjs.Ease.cubicInOut)
                this.on('tick', this.update, this);
.........完整代码请登录后点击上方下载按钮下载查看