JS结合Canvas画运动小球

开发 后端
canvas是HTML5新增的元素,也被称为画布,可以结合javascript实现绘制各种图形,制作各种炫酷的动画效果,现在我们也来使用canvas画随机运动小球。

​想了解更多内容,请访问:​

​51CTO和华为官方合作共建的鸿蒙技术社区​

​https://ost.51cto.com​

前言

canvas是HTML5新增的元素,也被称为画布,可以结合javascript实现绘制各种图形,制作各种炫酷的动画效果,现在我们也来使用canvas画随机运动小球。

实现思路

  1. 首先为了达到我们想要的效果,可以先创建一个构造函数。
  2. 给构造函数添加对应的属性和方法。
  3. 实例化出多个对象,并且保存在数组中。
  4. 遍历每个对象,实现画圆。
  5. 间隔修改每个球的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);

效果展示。

总结

canvas强大的绘图能力可以使网页的内容更加丰富多彩,给用户带来更好的视觉效果和和交互体验,掌握一些功能的使用可以让我们的项目更好的理解与canvas相关的框架使用,也能够创建丰富的web应用,同时也要求我们更好的掌握javascript。

​想了解更多内容,请访问:​

​51CTO和华为官方合作共建的鸿蒙技术社区​

​https://ost.51cto.com​

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2022-06-08 12:10:56

canvasvue.js

2012-09-24 13:49:13

HTML5CanvasJS

2013-08-22 10:02:44

2022-02-14 14:14:02

鸿蒙数据可视化JS

2012-07-13 13:41:35

Canvas

2015-03-10 11:30:01

CanvasJS简易时钟

2022-02-23 15:17:04

鸿蒙OpenHarmonJacascript

2022-03-11 20:31:35

canvasHarmony鸿蒙

2016-11-02 18:43:02

javascripthtml5vue.js

2022-05-05 08:02:44

MongoDBNode.js加密

2011-08-11 09:16:50

JavaScript

2021-02-23 12:23:57

鸿蒙HarmonyOS应用开发

2021-09-07 07:53:43

工具

2022-05-23 10:53:54

canvas柱状图鸿蒙

2011-08-12 08:56:31

JavaScript

2015-11-17 17:28:20

AfterShokz

2009-03-09 09:05:22

MID移动终端移动OS

2012-05-31 09:54:13

HTML5

2012-06-13 15:21:26

jQuery
点赞
收藏

51CTO技术栈公众号