随机生成小球（HTML5）

1.css样式

<style>#mycanvas{background-color: #000;}
</style>

2.代码

<body><!-- 需求分析 --><!-- 1.在canvas中随机生成50个小球 --><!-- 1.1 50个小球的大小都不一样(小球半径最大20)，透明度一样 --><!-- 2.小球沿着不同的运动轨迹 --><!-- 2.1小球运动速度和运动方向不一样 --><canvas id="mycanvas" width="600" height="600"></canvas><script>// 1.获取元素var mycanvas = document.getElementById("mycanvas");var context = mycanvas.getContext("2d");// 2.管理小球var arr = [];// 2.1随机生成50个小球 rgba(255,255,255,.5)function getrandom(){//页面只能生成50个球if(arr.length>50){clearInterval(timer);return false;}var r = Math.floor(Math.random()*255);var g = Math.floor(Math.random()*255);var b = Math.floor(Math.random()*255);// var bg = `rgba(${r},${g},${b},${Math.random()})`;var bg = `rgba(255,255,255,${Math.random()})`;//小球的半径var xr = Math.floor(Math.random()*20);//小球的圆心坐标var cx = Math.floor(Math.random()*200) + 200;var cy = Math.floor(Math.random()*200) + 200;//小坐标的移动距离(正反方向都可移动，数值可为正数和负数，数值不能过大，否则小球移动距离会大，动画效果不连贯)// Math.floor(Math.random()*4); 0,1,2,3;向下取整var sx = -2 + Math.floor(Math.random()*4);var sy = -2 + Math.floor(Math.random()*4);var obj = {bg: bg,xr: xr,cx: cx,cy: cy,sx: sx,sy: sy}//小球坐标移动距离为0的时候，不把小球放进去，否则小球不会动if(sx === 0 || sy === 0){arr.push(obj);}console.log("arr",arr);}var timer = setInterval(getrandom,30);// 2.2 将生成的50个小球画到画布上function drawBall(){context.clearRect(0,0,600,600);for(var i = 0;i<arr.length;i++){//小球碰撞到边框改变方向(改变方向：让移动的距离取反)if(arr[i].cx + arr[i].xr > 600 || arr[i].cx - arr[i].xr <= 0){arr[i].sx = arr[i].sx*-1;}if(arr[i].cy + arr[i].xr >600 || arr[i].cy - arr[i].xr <= 0){arr[i].sy = arr[i].sy*-1;}//改变小球的圆心坐标arr[i].cx = arr[i].cx + arr[i].sx;arr[i].cy = arr[i].cy + arr[i].sy;//画球context.beginPath();context.arc(arr[i].cx,arr[i].cy,arr[i].xr,0,Math.PI*2,false);context.fillStyle = arr[i].bg;context.fill();context.closePath();}}//间隔30秒去画小球，因为小球的位置不一样，就产生了动画的效果setInterval(drawBall,30);</script>
</body>

随机生成小球（HTML5）相关推荐

html获取随机字母,html5 canvas随机生成英文字母数字组合图片验证码代码
简单又实用的html5 canvas随机生成英文字母数字组合图片验证码代码,点击验证码图片可更换一组,还可随意修改验证码的内容,样式. 查看演示下载资源: 27 次下载资源下载积分: 20 积分 ...
【python】用numpy随机生成一元（多元）数据；如线性、指数、三角函数，或者多种样式结合
用numpy随机生成一元(多元)数据:如线性.指数.三角函数,或者多种样式结合题目代码结果随机数题目 1.用numpy随机生成一元(多元)数据:如线性.指数.三角函数,或者多种样式结合: 2 ...
C语言生成一个随机的九行九列数独,一个随机生成数独的C++程序
下面是编程之家 jb51.cc 通过网络收集整理的代码片段. 编程之家小编现在分享给大家,也给大家做个参考. //mySIZE是数独棋盘的边长,棋盘是mySIZE*mySIZE的大小 int mySI ...
随机生成6位图片验证码
1. [代码][C#]代码 /// <summary> /// PicHandler1 的摘要说明 /// </summary> public cla ...
Linux环境下编写一个shell程序，此程序的功能：随机生成一个1-100的数（答案）让用户猜
题目:编写一个shell程序,此程序的功能:随机生成一个1-100的数(答案)让用户猜,如果用户猜的数大于答案,则提示大了,如果用户猜的数小于答案,则提示小了.当用户猜对时提示:猜对了. #! /bi ...
python 随机生成密码
python 随机生成密码 #!/usr/bin/env python # -*- encoding: utf-8 -*- """ @Introduce : 随机生成密码 ...
python随机生成四位验证码的代码_Python random随机生成6位验证码示例代码
随机生成6位验证码代码 # -*- coding: utf-8 -*- import random def generate_verification_code(): ''' randomly gen ...
python随机生成30个8_Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例...
上代码: 环境:Python3 import random,string s=string.ascii_letters+string.digits print(s) n={''.join(random ...
python随机生成车牌_Python实现随机生成任意数量车牌号
之前做课设的时候舍友遇到了需要生成500w量级车牌号的问题,于是我便写了一个随机生成车牌号的程序,希望各位采纳. 注:Python实现 import random def chepaihao(len= ...
用python随机生成数字_如何实现python随机生成数字？
今天小编就生成随机数,整理了多个方式,方便大家在项目时,根据自己的需求,直接拿来套用即可,以下内容相当详细,具体来看看吧~ 说明:python中生成随机数主要用到random模块,方法主要包括:ran ...

随机生成小球（HTML5）

1.css样式

2.代码

随机生成小球（HTML5）相关推荐

最新文章

热门文章