canvas 小球喷射

Html

Css

* {
	margin:0;
	padding:0;
}
#firCanvas {
	display:block;
}
body {
	background-color:#000;
}

//随机数
function rand(x, y) {
    return Math.floor(Math.random() * (y - x + 1) + x);
}

//创建构造函数实现小球半径随机; 颜色随机; 坐标在中间矩形内; 一半概率对在x轴的速度方向设置正, 大小与半径有关
function Ball() {
    this.r = rand(3, 10);
    this.color = "rgb(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) + ")";
    this.x = rand(canvas.width / 2 - 200, canvas.width / 2 + 200);
    this.y = rand(canvas.height / 2 - 150, canvas.height / 2 + 150);
    //			this.speedX = this.r* (rand(0, 1) ? 1 : -1);
    //			this.speedY = this.r* (rand(0, 1) ? 1 : -1);
    if (this.x < canvas.width / 2) {
        this.speedX = this.r * (-1);
    }
    if (this.x > canvas.width / 2) {
        this.speedX = this.r * (1);
    }
    if (this.y < canvas.height / 2) {
        this.speedY = this.r * (-1);
    }
    if (this.y > canvas.height / 2) {
        this.speedY = this.r * (1);
    }
    //			this.speedX = this.rand(3,10);
    //			this.speedY = this.rand(3,10);

}

//原型赋值
//设置公共的行为
Ball.prototype.move = function() {
    this.r += 0.1;
    this.x += this.speedX;
    this.y += this.speedY;
    //			context.quadraticCurveTo(0,0,canvas.width,canvas.height);
}

Ball.prototype.draw = function() {
    context.beginPath();
    context.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
    context.fillStyle = this.color;
    context.fill();
}
//设置数组
var balls = [];

function zz() {
    for (var i = 0; i < 10; i++) {
        var ball = new Ball();
        ball.draw();
        //小球对象数组
        balls.push(ball);

}
}

setInterval(function() {
    zz();
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < balls.length; i++) {
        balls[i].move();
        balls[i].draw();
    }
}, 100);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas 小球喷射



代码描述：canvas小球喷射，粒子效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

丿嗨丶请叫我营

相关代码

canvas 小球喷射

最新