利用HTML5实现不规则的圆点连线动画特效



25 98 33



特效描述:利用HTML5实现 不规则的 圆点连线 动画特效,利用HTML5实现不规则的圆点连线动画特效

代码结构

1. HTML代码

<canvas id="c"></canvas>
<script>
;(function() {
    'use strict';
    var c = document.getElementById('c');
    var ctx = c.getContext('2d');
    var w = c.width = window.innerWidth;
    var h = c.height = window.innerHeight;
    var cx = w / 2;
    var cy = h / 2;
    var P = function(x, y) {
        this.x = x;
        this.y = y;
        this.vx = 0;
        this.vy = 0;
        this.r = 1 + Math.random() * 10;
        this.sa = Math.random() * Math.PI * 2;
        this.ea = Math.random() * Math.PI * 2;
        this.rt = Math.random() * Math.PI * 2;
        this.vrt = 0;
        this.h = 0;
    };
    P.prototype = {
        constructor: P,
        update: function() {
            this.vx += Math.random() * 0.1 - 0.05;
            this.vy += Math.random() * 0.1 - 0.05;
            this.vrt += Math.random() * 0.02 - 0.01;
            this.x += this.vx;
            this.y += this.vy;
            this.rt += this.vrt;
            var dx = cx - this.x;
            var dy = cy - this.y;
            var d = Math.sqrt(dx * dx + dy * dy);
            this.h = dx / d * 360;
            if (this.x < 0) {
                this.x = 0;
                this.vx *= -1;
            }
            if (this.x > w) {
                this.x = w;
                this.vx *= -1;
            }
            if (this.y < 0) {
                this.y = 0;
                this.vy *= -1;
            }
            if (this.y > h) {
                this.y = h;
                this.vy *= -1;
            }
        },
        render: function(ctx) {
            ctx.save();
            ctx.strokeStyle = 'black';
            ctx.fillStyle = 'hsla(' + this.h + ', 100%, 50%, 0.5)';
            ctx.translate(this.x, this.y);
            ctx.rotate(this.rt);
            ctx.beginPath();
            ctx.arc(0, 0, this.r, this.sa, this.ea);
            ctx.fill();
            ctx.stroke();
            ctx.restore();
        }
    };
    var ps = [];
    var p;
    var ctr = 200;
    for (var i = 0; i < ctr; i++) {
        p = new P(Math.random() * w, Math.random() * h);
        ps.push(p);
    }
    requestAnimationFrame(function loop() {
        requestAnimationFrame(loop);
        ctx.clearRect(0, 0, w, h);
        for (var i = 0; i < ctr; i++) {
            p = ps[i];
            p.update();
            p.render(ctx);
        }
        for (var i = 0; i < ctr; i++) {
            var p1 = ps[i];
            for (var j = i + 1; j < ctr; j++) {
                var p2 = ps[j];
                var dx = p1.x - p2.x;
                var dy = p1.y - p2.y;
                var d = Math.sqrt(dx * dx + dy * dy);
                if (d < 50) {
                    ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
                    ctx.beginPath();
                    ctx.moveTo(p1.x, p1.y);
                    ctx.lineTo(p2.x, p2.y);
                    ctx.stroke();
                }
            }
        }
    });
})();
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5线条动画 html5线条动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到