canvas画布内实现小球的随机移动

最新推荐文章于 2021-11-22 18:06:41 发布

Ariutaiaa_olc

最新推荐文章于 2021-11-22 18:06:41 发布

阅读量753

点赞数 1

分类专栏：前端

原文链接：https://segmentfault.com/a/1190000007525706

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

引用原文章：原文链接

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border:1px solid #daf;
        }
    </style>
</head>
<body>
<canvas id="game" width="500" height="500"></canvas>

</body>
<script>
//创建球构造函数
function ball() {
    this.r = this.rand(20);
    this.x = this.r;
    this.y = this.r;
    this.speedX = this.rand(10);
    this.speedY = this.rand(10);
    this.width = 0;
    this.height = 0;
    this.canvas = {};
    this.color = 'rgb('+this.rand(255)+','+this.rand(255)+','+this.rand(255)+')';
    this.init();
}
//2.向原型链添加方法
ball.prototype = {
    init:function () {
        var game = document.getElementById('game');
        this.canvas = game.getContext('2d');
        this.width=game.width;
        this.height=game.height;
    },
    rand:function (num) {
        return Math.floor(Math.random() * num+1);
    },
    play:function () {
        this.x += this.speedX;
        this.y += this.speedY;
        if (this.x>this.width-this.r) {
            this.speedX = -this.speedX;
        }
        if (this.x<this.r) {
            this.speedX = Math.abs(this.speedX);
        }
        if (this.y>this.width-this.r) {
            this.speedY = -this.speedY;
        }
        if (this.y<this.r) {
            this.speedY = Math.abs(this.speedY);
        }
        this.canvas.beginPath();
        this.canvas.fillStyle = this.color;
        this.canvas.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
        this.canvas.fill();
    }
};
//3.创建100个小球
var arr = [];
for (var i=0;i<100;i++) {
    arr[i] = new ball();
}

//4.使用定时器,每个30ms刷新屏幕
setInterval(function () {
    arr[0].canvas.clearRect(0,0,500,500);
    for (var i=0;i<arr.length;i++) {
        arr[i].play();
    }
},20)
</script>
</html>

Ariutaiaa_olc

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
canvas画布内实现小球的随机移动

引用原文章：原文链接效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border:1px solid #daf; } </style>&lt...
复制链接

扫一扫