一、❤ ❤实现效果

二、❤ ❤代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#can{border:1px solid #999;}</style>
</head>
<body><!-- 面向对象的小球 --><canvas id="can" width="500" height="500"></canvas><script>var can =document.getElementById("can");var ctx=can.getContext('2d');var w=h=500;// 面向对象
// 随机数
//  起始坐标x 起始坐标y 小球半径r x轴速度 y轴速度function r(num){return Math.random()*num;}var a=parseInt(r(10));console.log(a);// step1:创建小球类function Ball(){this.x=parseInt(r(5))+60;//因为半径最大为60 所以保持60的距离this.y=parseInt(r(3))+60;this.r=parseInt(r(40))+10;//10-50// 随机颜色this.color='#'+parseInt(Math.random()*0xffffff).toString(16);// this.xSpeed=r(3)+2;//[2,5]// this.xSpeed=r(3)+1;//[1,4]this.ySpeed=parseInt(r(3))+2this.xSpeed=parseInt(r(3))+1}//step2: 定义小球显示方法Ball.prototype.show=function(){// 更新坐标this.run();ctx.beginPath()ctx.arc(this.x,this.y,this.r,0,Math.PI*2);ctx.fillStyle=this.color;ctx.fill()ctx.closePath()};//step3: 定义小球运动的方法Ball.prototype.run=function(){if(this.x-this.r<=0 || this.x+this.r>=w){this.xSpeed= -this.xSpeed;}this.x=this.x+this.xSpeed;if(this.y-this.r<=0 || this.y+this.r>=h){this.ySpeed= -this.ySpeed;}this.y=this.y+this.ySpeed;};// step4:创建一个小球数组(一个大篮子)var ballArr=[];// 创建一个小球的数组for(var i=0;i<10;i++){var ball=new Ball();// 放入小球数组ballArr.push(ball);ball.show();}// step5:小球运动setInterval(function(){// 清除画布ctx.clearRect(0,0,w,h);// 遍历数组for(var j=0;j<ballArr.length;j++){var ball=ballArr[j];// 更新坐标，显示小球// ball.run();ball.show();// console.log(ballArr);}// console.log(00);},10);</script>
</body>
</html>

三、❤ ❤思路

1.创建画布宽500高500（记住宽高写在canvas里与写在css里是不一样的！！！！！）

    <canvas id="can" width="500" height="500"></canvas>

2.获取上下文

  var can =document.getElementById("can");var ctx=can.getContext('2d');

3.创建一个随机方法（用于设置小球宽高，颜色位置）

  function r(num){return Math.random()*num;}

4.创建小球类，起始坐标x 起始坐标y 小球半径r 小球颜色 x轴速度 y轴速度全部随机，记得要parseInt（我之前忘记使用ParseInt然后小球出不来），虽然小球初始位置的随机的，但是给小球设置初始位置至少是（60,60），因为小球的坐标是小球圆心的坐标，如果小球一开始出现在（1,1）等这些靠近边缘的地方，那么小球会一直贴着边缘运动，具体原因看小球的运动方法

// step1:创建小球类function Ball(){this.x=parseInt(r(5))+60;//因为半径最大为60 所以保持60的距离this.y=parseInt(r(3))+60;this.r=parseInt(r(40))+10;//10-50// 随机颜色this.color='#'+parseInt(Math.random()*0xffffff).toString(16);// this.xSpeed=r(3)+2;//[2,5]// this.xSpeed=r(3)+1;//[1,4]this.ySpeed=parseInt(r(3))+2this.xSpeed=parseInt(r(3))+1}

5.定义小球运动方法，小球左侧小于或等于零，右侧大于或者等于画布宽小球马上改变运动方向避免出去

//step3: 定义小球运动的方法Ball.prototype.run=function(){if(this.x-this.r<=0 || this.x+this.r>=w){this.xSpeed= -this.xSpeed;}this.x=this.x+this.xSpeed;if(this.y-this.r<=0 || this.y+this.r>=h){this.ySpeed= -this.ySpeed;}this.y=this.y+this.ySpeed;};

6.创建一个小球数组

  // step4:创建一个小球数组(一个大篮子)var ballArr=[];

7.循环让所有小球出现

 for(var i=0;i<10;i++){var ball=new Ball();// 放入小球数组ballArr.push(ball);ball.show();}

8.让小球运动起来（小球运动一定不能忘了清除画布clearRect!!!）

// step5:小球运动setInterval(function(){// 清除画布ctx.clearRect(0,0,w,h);// 遍历数组for(var j=0;j<ballArr.length;j++){var ball=ballArr[j];// 更新坐标，显示小球// ball.run();ball.show();// console.log(ballArr);}// console.log(00);},10);

四、❤ ❤总结

赶快行动起来吧！！！动手自己试试看

❤ ❤html canvas面向对象的彩色小球❤ ❤相关推荐

Canvas动画彩色小球下落
彩色小球.html <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
canvas绘制七彩随机小球！
canvas绘制七彩随机小球 1.题目拿到一个案例,需要在画布上实现不同大小颜色位置的七彩小球,并且要运动起来! 2.思路 (1).第一步需要在页面上创建画布元素,创建一个数组用来存放随机小球的个数 ...
html画布实现小球沿直线下落,[面向对象的案例]在canvas画布内实现小球的随机移动...
//css部分,给画布设置边框 canvas { border:1px solid orange; } //html 添加画布准备工作先确定所需要的属性小球的起始xy坐标.R半径.颜色.速度sp ...
html跳动的小球,canvas绘制跳动的小球
动画反弹 *{ margin:0; padding:0; } canvas1{ box-shadow: 0px 0px 10px red; position: absolute; left:50px; ...
canvas教程7-炫彩小球
文章目录一.炫彩小球二.效果图篇章一.炫彩小球 <!DOCTYPE html> <html lang="en"> <head><m ...
js+html5 canvas全屏彩色条状海浪动画js特效
下载地址基于js+html5 canvas制作的一款好看的全屏彩色条状海浪动画特效. dd:
这个机械装置真的能够分离彩色小球吗？
在网络中有人展示了一段神奇的视频,显示一块高尔顿钉板(Galton board)可以自动按照颜色来分离小球.这段视频让每位观看者都大为困惑. ▲ 彩球自动分离装置这种视频片段在网络上还是蛮流行的.它 ...
canvas笔记-绘制运动小球（落地弹起，遇边回弹）
程序运行截图如下: 就是这个球,遇到底端及左右两边都可以弹源码如下: canvas4.html <!DOCTYPE html> <html lang="en"& ...
html条纹填充色,HTML5/Canvas 上传图片的彩色斑马条纹遮罩效果
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var reader = new FileReader(); var img = document.crea ...
html5 canvas爆炸,html5 canvas彩色爆炸的小球动画特效
特效描述:html5 canvas 彩色爆炸小球动画特效.html5 canvas特效,有中心向四周爆炸的彩色小球,有开始和暂停按钮代码结构 1. HTML代码开始运动停止运动 var can ...

❤ ❤html canvas面向对象的彩色小球❤ ❤

一、❤ ❤实现效果

二、❤ ❤代码

三、❤ ❤思路

四、❤ ❤总结

❤ ❤html canvas面向对象的彩色小球❤ ❤相关推荐

最新文章

热门文章