首页 > 网站脚本

一款彩色粒子放射特效

应用平台:PC + 移动

   凡库  No.03
网站样式兼容性
样式描述:绚丽的犹如星空般的、动态彩色粒子特效。

绚丽的犹如星空般的、动态彩色粒子特效。

友情提示:文件压缩包若带有密码,均为:www.changfanku.com

部分代码段

<script>
window.onload = function() {
    var oCanvas = document.getElementById('canvasParticle');
    var cxt = null;
    var particles = {};
    var particleIndex = 0;

    if (oCanvas.getContext) {
        cxt = oCanvas.getContext('2d');
    }

    oCanvas.width = window.innerWidth;
    oCanvas.height = window.innerHeight;

    function Particle() {
        particleIndex++;
        particles[particleIndex] = this;

        this.x = oCanvas.width / 2;
        this.y = oCanvas.height / 2;
        this.vx = Math.random() * 6 - 3;
        this.vy = Math.random() * 4 - 2;
        this.growth = (Math.abs(this.vx) + Math.abs(this.vy)) * 0.01; // 根据x/y轴的位置决定大小
        this.id = particleIndex;
        this.size = 0;
        this.color = getRandomColor();
    };

    Particle.prototype.draw = function() {
        this.x += this.vx;
        this.y += this.vy;
        this.size += this.growth;

        if (this.x < 0 || this.x > oCanvas.width || this.y < 0 || this.y > oCanvas.height) {
            delete particles[this.id];
        }

        cxt.fillStyle = this.color;
        cxt.beginPath();
        cxt.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
        cxt.fill();
    };

    function animate() {
        requestAnimationFrame(animate);

        cxt.fillStyle = '#222222';
        cxt.fillRect(0, 0, oCanvas.width, oCanvas.height);

        new Particle();

        for (var i in particles) {
            particles[i].draw();
        }
    };
    requestAnimationFrame(animate);
};


function getRandomColor() {
    return '#' + (Math.random() * 0xffffff << 0).toString(16);
};</script>
推荐样式

DEMO.游艇租赁公司网站样式

一个提供游艇出游、租赁等服务的公司网站样式。
  生活服务
 294  ¥8000元

DEMO.卫浴公司网站样式

一款家装、家庭厨具、卫浴用品的企业网站样式。
  贸易百货
 226  ¥8000元

DEMO.黑色科技材料网站样式

黑色科技网站样式
  科技广告
 596  ¥8000元

DEMO.新能源公司网站模板

一款新能源集团网站样式,大气、简洁。
  工业化工
 251  ¥8000元

微信扫一扫

学习更多的网络营销知识

海量网站任你选~