canvs之多个小球运动

这个案例的原理及分析和上一个：canvas之小球动画是一样的；只不过在这里小球的运动速度、小球的半径以及小球的颜色我们都设置为了随机而已

 canvas {border: 1px solid}

<canvas width="400" height="300">您的浏览器不支持canvas标签</canvas>

 <script>var mycanvas = document.querySelector('canvas');var ctx = mycanvas.getContext('2d');//使用构造函数生成小球function Circle() {//半径10-30this.r = Math.floor(Math.random() * 20 + 11);//初始坐标this.x = Math.floor(Math.random() * (400 - this.r));this.y = Math.floor(Math.random() * (300 - this.r));//运动值this.dx = Math.floor(Math.random() * 8);this.dy = Math.floor(Math.random() * 6);//小球颜色this.color = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')';}//方法写在原型上//判断小球运动轨迹Circle.prototype.update = function() {//x轴方向this.x += this.dx;if (this.x <= this.r) {this.dx = -this.dx;} else if (this.x >= (400 - this.r)) {this.dx = -this.dx;}//y轴方向this.y += this.dy;if (this.y <= this.r) {this.dy = -this.dy;} else if (this.y >= (300 - this.r)) {this.dy = -this.dy;}};//绘制小球Circle.prototype.render = function() {ctx.beginPath();ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);ctx.fillStyle = this.color;ctx.fill();ctx.closePath();};//随机生成三个小球var arr = [];for (var i = 0; i < 3; i++) {arr[i] = new Circle();}console.log(arr);// 设置定时器var timer = setInterval(function() {//小球运动之前先清除ctx.clearRect(0, 0, mycanvas.width, mycanvas.height);for (var i = 0; i < arr.length; i++) {arr[i].update();arr[i].render();}}, 30);
</script>

canvs之多个小球运动相关推荐

Windows Store App JavaScript 开发：小球运动示例
通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...
简单html js 特效,Js实现简单的小球运动特效
废话不多说了,直接给大家贴js代码了,具体代码如下所示: //定义局部变量 var directX=;//定义x轴方向 var directY=;//定义y轴方向 var ballX=;//定义x轴坐 ...
css动画，小球运动
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档前言随着用户的需求,以及为提升用户体验今天我们讲利用css制作动画提示:以下是本篇文章正文内容,下面案例可供参考一.定义关键帧 ...
QT5-实现小球运动碰撞
QT实现小球运动碰撞反弹思路结构设置运动速度画出小球 BoundingRect和Shape函数运动和碰撞反弹编程工具为vs2010+qt 5.1.2 思路由于第一次刚使用qt,所以就写写 ...
【Unity】控制小球运动
跟着B站教程,做了个简单的控制小球运动的场景,记录一下: 文章目录搭建场景小球运动脚本相机跟随小球运动脚本效果展示搭建场景建立地面Plane.小球Player和四面墙Wall. 小球运动脚 ...
javafx小球运动
javafx使用图形界面在随机位置生成颜色随机.半径随机.初始运动速度随机的小球,然后按照某种轨迹进行运动(运动轨迹方程自选),到边界碰撞返回. 我太爱我的java张春凤老师了,第一次写博客记录编程生 ...
java小球反弹_模拟小球运动、撞击、反弹效果
[实例简介] 模拟一个小球在屏幕内运动,当撞击到边缘时会反弹,底部不会反弹,底部有一个长条,左右移动来使小球反弹 [实例截图] [核心代码] b79af779-cdf0-4383-9460-5ab61 ...
canvas实现许多小球运动
首先先看一下效果: 一.canvas canvas是画布的意思,画布,就要在其上画画,画画的步骤有: ① 抬起笔 beginPath(): ② 把原来不需要的擦干净 clearRect(0,0,w,h ...
java 多线程动画_Java多线程实现简单动画（小球运动）效果
Ŀ¼ 首先,严格按照操作系统理论来说,多线程并没有实现真正的同时进行.而是CPU将工作时间分成很多很短的时间片(Time slicing),每个时刻只能执行一个线程. 主要有两种方式实现多线程,一种是 ...

canvs之多个小球运动

canvs之多个小球运动相关推荐

最新文章

热门文章