canvas多个小球运动

Html

Css

canvas {
	border:1px solid red;
}

var myCanvas = document.getElementById("cont");
var txt = myCanvas.getContext("2d");
//获取canvas宽高
var cw = myCanvas.width;
var ch = myCanvas.height;

//随机函数
function randNum(min, max) {
    return parseInt(Math.random() * (max - min + 1) + min);
}

//定义一个球类
function Ball() {
    //定义圆的半径
    this.r = randNum(10, 50);
    //定义球的圆心位置
    this.x = randNum(this.r, cw - this.r);
    this.y = randNum(this.r, ch - this.r);

//定义球的颜色
    this.color = "rgb(" + randNum(0, 255) + "," + randNum(0, 255) + "," + randNum(0, 255) + ")";

//定义速度
    this.speedX = randNum(-5, 5) || 1;
    this.speedY = randNum(-5, 5) || 1;

//画的方法
    this.draw = function() {
        txt.beginPath();
        txt.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
        txt.fillStyle = this.color;
        txt.fill();
    }
}

//球原型的方法通过类的原型追加
Ball.prototype.move = function() {
    this.x += this.speedX;
    this.y += this.speedY;

//边界值判断
    if (this.x <= this.r || this.x >= cw - this.r) {
        this.speedX *= -1;
    }
    if (this.y <= this.r || this.y >= ch - this.r) {
        this.speedY *= -1;
    }
}
//定义一个数组,去存储多个球的信息
var ballArr = [];

for (var i = 0; i < 100; i++) {
    var ball = new Ball();
    ballArr.push(ball);
}
console.log(ballArr);
//动画函数
function animate() {

//清画布
    txt.clearRect(0, 0, cw, ch);
    for (var i = 0; i < ballArr.length; i++) {
        ballArr[i].draw();
        ballArr[i].move();
    }
    window.requestAnimationFrame(animate);
}
animate();

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

立即下载

canvas多个小球运动



代码描述：canvas实现多个小球在画板中的运动

这里边框比较粗俗,主要提供方法,大家可以根据需要自己修改

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

yululu

相关代码

canvas多个小球运动

最新