canvas实现许多小球运动

首先先看一下效果：

一、canvas

canvas是画布的意思，画布，就要在其上画画，画画的步骤有：

① 抬起笔

beginPath()；

② 把原来不需要的擦干净

clearRect(0,0,w,h);

参数是：起初x轴坐标，起初y轴坐标，w是清除区域的看，h是清除区域的高

③ 画笔蘸上自己需要的颜色

fillStyle = "color";

④ 构思绘画图形（此处是一个圆）

arc(x,y,r,0,Math.PI*2);

参数x ， y 指圆心坐标， r 指圆的半径

⑤ 将自己的构思进行填充

fill();

二、帧

每一帧是静止的图像，在1s内连续播放很多张静止的图片，就形成了动画。

这里我们就可以用到定时器setInterval()。可以实现每隔一个时间就播放一帧。

三、每个球的特点

① 球的大小不一样

② 颜色不一样

③ 位置不一样

④ 运动的方向不一样

四、面向对象思想

面向对象有类的概念，通过类可以创建任意多个具有相同的属性和方法的对象。每一个对象都是基于一个引用类型创建的。

创建一个对象

function createObject(){};或
var createObject = function(){};

创建一个对象的实例

var Objectlist = new createObject();

对对象添加属性与方法：

① 在对象内直接添加属性与方法

var kk = function(){this.name = "keny";this.run = function(){};
}

② 在对象的原型中进行添加属性与方法

kk.prototype.run = function() {...
};
或者
kk.prototype = {run: function() {},draw:function(){}
};

五、代码部分

HTML

<canvas class="aCanvas"></canvas>

CSS

body{margin: 0;
}
canvas {display: block;
}

<script type="text/javascript">
var aCanvas = document.querySelector(".aCanvas");var cx = aCanvas.getContext('2d');//返回一个表示用来绘制的环境类型的环境 二维绘图
//选择几个自己喜欢的颜色，存在一个数组里面
var Color =["#99cccc","#FFCC99","#FFCCCC","#0099CC","#FF9999","#FFFF66","#FF6666","#FFFF00","#99CCFF"
];{//电脑的一些基本信息var w =  innerWidth;//电脑屏幕的宽var h = innerHeight;//电脑屏幕的高aCanvas.width = w;//定义画布的宽aCanvas.height = h;//定义画布的高
}//定义一个随机函数
function Random(min , max){return Math.random()*(max-min)+min;
}
function Bubble(){};
//定义一个Bubble的一个对象
Bubble.prototype = {//基本属性init:function(){this.x = Random(0,w);//新创建的小球的 x 坐标  范围：0-wthis.y = Random(0,h);//新创建的小球的 y 坐标  范围：0-hthis.r = Random(2,6);//新创建的小球的 半径this.color = Color[Math.floor(Random(0,6))];//新创建的小球的 颜色   floor向上取整this.vX = Random(-1,1);//该小球在x轴方向的速度this.vY = Random(-1,1);//该小球在y轴方向的速度},//绘画属性draw:function(){cx.beginPath();//把画笔抬起来// cx.clearRect(0,0,w,h);//擦除canvas上矩形区域  需要矩形的左上角坐标 X Y 以及矩形的 宽 高。参数：（x,y,width,height）//代表画笔的颜色cx.fillStyle = this.color;//构思绘制一个图形cx.arc(this.x,this.y,this.r,0,Math.PI*2);//圆心坐标 X Y 半径//下笔作画cx.fill();},//球的运动属性move:function(){this.x += this.vX;this.y += this.vY;if(this.x - this.r < 0||this.x+this.r>w)//挡球碰到屏幕x轴运动边缘就反弹this.vX = -this.vX;if(this.y - this.r < 0||this.y+this.r>h)//挡球碰到屏幕y轴运动边缘就反弹this.vY = -this.vY;this.draw();//每次运动之后就要进入画的的下一帧}
};
//创建Bubble对象的实例  ->  创建一个小球
//用for循环可以穿件多个小球  将它包含在一个函数里面，方便多次使用
//创建一个数组存放残生的小球球
var arr = new Array();
function createBubble(num){for(var i = 0;i < num;i++){var bubble = new Bubble();//创建一个新的小球arr.push(bubble);//将每次创建的小球丢进数组里bubble.init();bubble.draw();}
}
createBubble(666);//创建666个小球
//
setInterval(function(){//实现画中帧的播放cx.clearRect(0,0,w,h);//每次播放新的下一帧之前要对上一帧进行清除工作for(var item of arr){item.move();//移动}
},1000/100);//1000/100代表是1000ms 100张   ->   1s 100张</script>

canvas实现许多小球运动相关推荐

Windows Store App JavaScript 开发：小球运动示例
通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...
canvas动画:自由落体运动
经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制如何对基本图形移动旋转 ...
canvs之多个小球运动
这个案例的原理及分析和上一个:canvas之小球动画是一样的:只不过在这里小球的运动速度.小球的半径以及小球的颜色我们都设置为了随机而已 canvas {border: 1px solid} < ...
canvas 多个小球绕椭圆轨道转动
canvas实现小球绕轨道转动,并点击某一个后可以加速运动到指定位置,第一次使用canvas做动画,代码有些乱 = =,话不多说看代码,拷贝添加图片可以直接运行 canvas椭圆轨道运动 // An ...
简单html js 特效,Js实现简单的小球运动特效
废话不多说了,直接给大家贴js代码了,具体代码如下所示: //定义局部变量 var directX=;//定义x轴方向 var directY=;//定义y轴方向 var ballX=;//定义x轴坐 ...
彩色点缀,canvas炫彩小球样式背景
canvas炫彩小球样式背景效果展示代码如下 1.css * {margin: 0;padding: 0; }.backCanvas canvas {display: block;margin: ...
php3D动画,html5的canvas实现几何模型3D运动动画效果
html5的canvas实现几何模型3D运动动画效果 JS片段: var {atan2,sqrt,sin,cos,PI,acos} = Math; function project3D(x,y,z,v ...
css动画，小球运动
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档前言随着用户的需求,以及为提升用户体验今天我们讲利用css制作动画提示:以下是本篇文章正文内容,下面案例可供参考一.定义关键帧 ...
QT5-实现小球运动碰撞
QT实现小球运动碰撞反弹思路结构设置运动速度画出小球 BoundingRect和Shape函数运动和碰撞反弹编程工具为vs2010+qt 5.1.2 思路由于第一次刚使用qt,所以就写写 ...

canvas实现许多小球运动

canvas实现许多小球运动相关推荐

最新文章

热门文章