js实现canvas能量树摇摆动画效果代码-html代码-BFW代码库

js实现canvas能量树摇摆动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas能量树摇摆动画效果代码

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

<html>
<head>
    <style>
        body {
            background: hsla(0, 0%, 0%, 1);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-image: linear-gradient(torighttop, hsla(0, 5%,5%, 0.5), hsla(0, 0%, 15%,1));
            background-image: -moz-linear-gradient(torighttop, hsla(0, 5%,5%, 0.5), hsla(0, 0%, 15%,1));
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
        }
    </style>

</head>
<body>
    <canvas id="canv" width="950" height="581"></canvas>
    <script>
        var c = document.getElementById('canv');
        var $ = c.getContext('2d');
        var w = c.width = window.innerWidth;
        var h = c.height = window.innerHeight;
        var w2 = w* 0.5;
        var h2 = h * 0.5;
        var uu = 0;
        var topiary = new branch(80, 0, 0);
        var cnt = 0;

        function anim() {
            cnt++;
            uu -= .5;
            if (cnt%2) {
                draw();
            }
            window.requestAnimationFrame(anim);
        }
        anim();

        function draw() {
            $.save();
            $.clearRect(0, 0, w, h);
            $.translate(w2, h*0.98);
            $.rotate(-Math.PI * 0.5);
            topiary.disp($);
            $.restore();
        }

        function branch(len, ang, gen) {
            this.len = len;
            this.ang = ang;
      .........完整代码请登录后点击上方下载按钮下载查看