JavaScript结合Canvas如何绘画画运动小球

这篇文章给大家分享的是有关javascript结合canvas如何绘画画运动小球的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

1.实现思路

• 首先为了达到我们想要的效果,可以先创建一个构造函数。

• 给构造函数添加对应的属性和方法。

• 实例化出多个对象,并且保存在数组中。

• 遍历每个对象,实现画圆。

• 间隔修改每个球的x,y值。

先准备画布确定对应的宽高:

<canvas id="canvas" width="400" height="400"></canvas><script>    let canvas = document.getElementById('canvas');    let ctx = canvas.getContext('2d');    let maxWidth = canvas.width,        maxHeight = canvas.height;        ctx.fillStyle = '#000';        ctx.fillRect(0, 0, maxWidth, maxHeight);</script>

因为是随机运动,所以要创建一个获取随机数的方法:

function getRandomNum(minNum, maxNum) {    switch (arguments.length) {        case 1:            return Math.round(Math.random() * minNum + minNum);            break;        case 2:            return Math.round(                Math.random() * (maxNum - minNum) + minNum);            break;        case 0:            return 0;            break;    }}// 创建一个Ball的构造函数    function Ball(maxWidth, maxHeight, ctx) {        this.ctx = ctx;        this.maxWidth = maxWidth;        this.maxHeight = maxHeight;        // 随机半径        this.r = getRandomNum(5, 15);        // 随机x,y坐标        this.x = getRandomNum(this.r, this.maxWidth - this.r);        this.y = getRandomNum(this.r, this.maxHeight - this.r);        // 平移速度,正负区间是为了移动方向多样        this.speedX = getRandomNum(-2, 2);        this.speedY = getRandomNum(-2, 2);        // 颜色随机        this.color = `rgba(${getRandomNum(0, 255)},        ${getRandomNum(0, 255)},        ${getRandomNum(0, 255)},${Math.random()})`;    }    Ball.prototype = {        draw: function () {            ctx.beginPath();            ctx.fillStyle = this.color;            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);            ctx.fill();            ctx.closePath();        },        move: function () {            // 判断边界值,让圆球始终保证在画面内            if (this.x > this.maxWidth - this.r || this.x < this.r) {                this.speedX = -this.speedX;            }            if (this.y > this.maxHeight - this.r || this.y < this.r) {                this.speedY = -this.speedY;            }            this.x += this.speedX;            this.y += this.speedY;        }    };    // 创建100个Ball实例    let balls = [];    for (let i = 0; i < 100; i++) {        let newBall = new Ball(maxWidth, maxHeight, ctx);        newBall.draw();        balls.push(newBall);    }

2.静态效果

现在我们画出了不同半径和颜色的静止圆球：

调用move方法,间隔修改每个球的x,y值。

setInterval(() => {    // 每次画之前都要清除画布    ctx.clearRect(0, 0, maxWidth, maxHeight);    ctx.fillStyle = '#000';    ctx.fillRect(0, 0, maxWidth, maxHeight);    for (let j = 0; j < 100; j++) {        balls[j].draw(ctx);        balls[j].move();    }}, 100);

效果展示：

感谢各位的阅读！关于“JavaScript结合Canvas如何绘画画运动小球”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！