canvas放射粒子效果

这个也是别人的代码，就不多介绍了

写了些注释

 

body {
	overflow:hidden;
	margin:0;
	padding:0;
	background-color:#222222
}
</style>
</head>
<body>
<canvas id="canvasParticle">Canvas is not supported in your brower.</canvas><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;
        //初始化粒子沿X轴和Y轴的速度
        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>
</body>

 

posted @ 2017-05-17 09:54  安筱雨  阅读(1414)  评论(0)    收藏  举报