canvas画布融入帖子续篇：驱动多个运动对象

马黑黑 · 发表于 2022-8-9 12:58

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

我们已经介绍了如何在canvas画布里通过创建对象的方式驱动一个球球，该方法的核心是构建一个运动对象，该对象拥有一些通用属性和若干方法，然后以实例化的形式提供属性值、调用通用方法，从而驱动实例对象运动。之前的介绍，我们只创建了一个对象实例，但我们谈到可以扩展实例并将诸多实例放入数组中，然后在渲染动画函数中一一驱动这些对象实例。

要实现对多个运动对象的驱动，我们需要准备一个工具函数，它的作用是获取随机整数，以便我们在创建 Ball 对象实例时随机定义圆球的圆心坐标、半径、横向纵向偏移量和颜色等等。针对偏移量等，我们希望圆球一开始时走向不同，但不能出现0，所以取整数的函数我们要处理一下这个问题：

let num = (min, max) => {
let number = Math.floor(Math.random() * (max - min + 1)) + min;
if(number == 0) number = 1;
return number;
}

这样，我们就可以创建 Ball 对象的多个实例化对象了。首先声明一个数组，用以存储实例化对象：

let ballAr = new Array(20);

ballAr 现在是个空数组，其长度是 20，即它有 20 个空元素。下一步，我们用一个 for 语句充实这些空元素并令其成为 Ball 的实例化对象：

for(let j = 0; j < ballAr.length; j++) { //批量实例化Ball对象
let item = new Ball(
num(20, width - 20), // x 坐标
num(20, height - 20), // y 坐标
num(5,10), // r 半径
0.5 * num(-2, 2), // vx 偏移量
0.5 * num(-2,2), // vy 偏移量
`rgba(${num(0,255)}, ${num(0,255)}, ${num(0,255)}, 075)` //color 颜色
);
ballAr[j] = item; //记入数组内容
}

最后，我们将渲染函数中驱动单个实体化对象换成驱动多个实体化对象即可大功告成（可以比较一下二者的不同）：

//渲染函数：驱动多个对象
function render() {
ctx.clearRect(0,0,width,height); //清除画布
ctx.fillStyle = 'transparent'; //画布填充底色
ctx.fillRect(0,0,width,height); //填充矩形区域
for(item of ballAr) { //遍历已实体化的 Ball 对象数组
item.draw(); //对象绘制
item.move(); //对象数据更新
}
requestAnimationFrame(render); //递归调用本函数
}

附：驱动单个对象运动的函数

//渲染函数：驱动单个对象
function render() {
      ctx.clearRect(0,0,width,height); //清除画布
      ctx.fillStyle = 'transparent'; //'rgba(0,0,0,0)'; //用透明色绘制画布底色
      ctx.fillRect(0,0,width,height); //填充矩形（draw() 函数就在这个矩形区域上作画）
      myball.draw(); //调用 draw 函数作画
      myball.move(); // 变更数据
      requestAnimationFrame(render); //递归调用本函数：永动机制
}

完整代码请在二楼查阅。

马黑黑 · 发表于 2022-8-9 12:59

驱动多个对象运动的示例代码：

<style>
#papa { margin: auto; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; position: relative; }
#mama { position: absolute; width: 400px; height: 400px; left: calc(50% - 200px); top: calc(50% - 200px); border: 1px solid pink; }
#canv { position: absolute; }
</style>
<div id="papa">
<div id="mama"><canvas id="canv"></canvas></div>
</div>
<script>
let width = canv.width = mama.offsetWidth, height = canv.height = mama.offsetHeight;
let ctx = canv.getContext('2d');
let ballAr = new Array(20);
let num = (min, max) => {
let number = Math.floor(Math.random() * (max-min+1)) + min;
if(number == 0) number = 1;
return number;
}
for(let j = 0; j < ballAr.length; j++) { //实例化对象
let item = new Ball(
num(20, width - 20), // x 坐标
num(20, height - 20), // y 坐标
num(5,10), // r 半径
0.5 * num(-2, 2), // vx 偏移量
0.5 * num(-2,2), // vy 偏移量
`rgba(${num(0,255)}, ${num(0,255)}, ${num(0,255)}, 075)` //color 颜色
);
ballAr[j] = item;
}
//绘制对象
function Ball(x, y, r, vx, vy, color) {
this.x = x;
this.y = y;
this.r = r;
this.vx = vx;
this.vy = vy;
this.color = color;
}
//绘制函数：画圆
Ball.prototype.draw = function() {
ctx.beginPath();
ctx.fillStyle = this.color
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
ctx.fill();
}
//移动函数：变换圆心
Ball.prototype.move = function() {
if (this.x + this.r >= width || this.x - this.r <= 0) this.vx = -this.vx;
if (this.y + this.r >= height || this.y - this.r <= 0) this.vy = -this.vy;
this.x += this.vx;
this.y += this.vy;
}
//渲染函数：整合绘制、更新函数+递归调用
function render() {
ctx.clearRect(0,0,width,height);
ctx.fillStyle = 'transparent';
ctx.fillRect(0,0,width,height);
for(item of ballAr) {
item.draw();
item.move();
}
requestAnimationFrame(render);
}
render();
</script>