canvas动态多彩方形流光变换效果-html代码-BFW代码库

canvas动态多彩方形流光变换效果

代码语言：html

所属分类：动画

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<style>
body {
        background: #000;
        overflow: hidden;
}

canvas {
        display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas,
        ctx,
        width,
        height,
        size,
        lines,
        tick;

function line() {
        this.path = [];
        this.speed = rand(10, 20);
        this.count = randInt(10, 30);
        this.x = width / 2, +1;
        this.y = height / 2 + 1;
        this.target = {
                x: width / 2,
                y: height / 2
        };
        this.dist = 0;
        this.angle = 0;
        this.hue = tick / 5;
        this.life = 1;
        this.updateAngle();
        this.updateDist();
}

line.prototype.step = function(i) {
        this.x += Math.cos(this.angle) * this.speed;
        this.y += Math.sin(this.angle) * this.speed;

        this.updateDist();

        if (this.dist < this.speed) {
                this.x = this.target.x;
                this.y = this.target.y;
                this.changeTarget();
        }

        this.path.push({
                x: this.x,
                y: this.y
        });
        if (this.path.length > this.count) {
                this.path.shift();
        }

        this.life -= 0.001;

        if (this.life <= 0) {
                this.path = null;
                lines.splice(i, 1);
        }
};

line.prototype.updateDist = function() {
        var dx = this.target.x - this.x,
                dy = this.t.........完整代码请登录后点击上方下载按钮下载查看