这篇文章给大家分享的是有关JavaScript结合Canvas如何绘画画运动小球的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
首先为了达到我们想要的效果,可以先创建一个构造函数。
给构造函数添加对应的属性和方法。
实例化出多个对象,并且保存在数组中。
遍历每个对象,实现画圆。
间隔修改每个球的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);
}现在我们画出了不同半径和颜色的静止圆球：
调用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如何绘画画运动小球”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
