用canvas画一个气球的效果)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta
name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/> <style type="text/css"> * { margin: 0px; padding: 0px; } </style> </head>
<body> <canvas id="box" width="" height=""></canvas> <!--<button
id="btn">暂停</button>--> <script type="text/javascript"> var box =
document.querySelector("#box"); var ctx = box.getContext("2d"); var clientWidth
= (document.documentElement || document.body).clientWidth; //获取可视区域宽度 var
clientHeight = (document.documentElement || document.body).clientHeight;
//获取可视区域高度 box.width = this.clientWidth; box.height = this.clientHeight; var
canvasBox = function() { this.limit = 80; //限制气球数量 this.sizes = [15, 20, 25,
30]; //气球的几种尺寸 this.width = clientWidth; this.height = clientHeight;
this.balloonList = []; //气球集合 this.colors = ["orange", "deeppink",
"deepskyblue", "yellow", "red"]; this.speedList = [1, -2, 3, -4, 5]; //
document.getElementById("btn").addEventListener("click", function() { //
this.stop(); // }.bind(this)) this.init = function() { //初始化生成气球 var that =
this; for(var i = 0,len=this.limit; i <len; i++) { var sizeIndex =
Math.floor(Math.random() * 4); var size = this.sizes[sizeIndex]; var colorIndex
= Math.floor(Math.random() * 5); var color = this.colors[colorIndex]; var x =
Math.floor(Math.random() * this.width); var y = Math.floor(Math.random() *
this.height); var globalAlpha = (Math.random() * (0.8 - 0.1) + 0.1) x = x +
size >= this.width ? (this.width - size - 1) : (x - size <= 0 ? size + 1 : x);
y = y + size >= this.height ? (this.height - size - 1) : (y - size <= 0 ? size
+ 1 : y); var balloon = function() { //单个气球 this.x = x; this.y = y; this.size =
size; this.color = color; this.speedX = that.speedList[Math.floor(Math.random()
* 5)]; this.speedY = that.speedList[Math.floor(Math.random() * 5)];
this.globalAlpha = globalAlpha; this.globalSpeed = 0.01; }
this.balloonList.push(new balloon()); ctx.fillStyle = color; ctx.globalAlpha =
globalAlpha; ctx.shadowColor = "black"; ctx.beginPath(); ctx.arc(x, y, size, 0,
2 * Math.PI); ctx.fill(); } this.move(); } this.move = function() { //气球开始随机移动
this.time = window.requestAnimationFrame(this.move.bind(this));
ctx.clearRect(0, 0, this.width, this.height); for(var i = 0,len=this.limit; i <
len; i++) { var balloon = this.balloonList[i]; if(balloon.x + balloon.size >=
this.width || balloon.x - balloon.size <= 0) { balloon.speedX =
-balloon.speedX; } if(balloon.y + balloon.size >= this.height || balloon.y -
balloon.size <= 0) { balloon.speedY = -balloon.speedY; } if(balloon.globalAlpha
>= 0.8 || balloon.globalAlpha <= 0.1) { balloon.globalSpeed =
-balloon.globalSpeed; } var x = balloon.x + balloon.speedX; var y = balloon.y +
balloon.speedY; balloon.x = x; balloon.y = y; balloon.globalAlpha =
balloon.globalAlpha + balloon.globalSpeed; ctx.fillStyle = balloon.color;
ctx.beginPath(); ctx.shadowBlur = 10; ctx.shadowOffsetX = 5; ctx.shadowOffsety
= 0; ctx.globalAlpha = balloon.globalAlpha; ctx.shadowColor =
"rgba(0,0,0,0.2)"; ctx.arc(x, y, balloon.size, 0, 2 * Math.PI); ctx.fill(); } }
this.stop = function() { //暂停 if(this.time) {
window.cancelAnimationFrame(this.time); this.time = null } else { this.move();
} } }; new canvasBox().init(); </script> </body> </html>
代码写的不怎么样,看看就好

技术
©2019-2020 Toolsou All rights reserved,
mybatis-config.xml设置默认值配置(精华)2020年7月15日 微信小程序 import和include差别Centos7 下mysql8.0的安装以及修改初始密码;Thread.getContextClassLoader与Thread.getClassLoader()区别MySql语句 递归寻找某输入部门的所有下级部门Mybatis映射文件Mapper.xml中#和$的区别BugkuCTF-Web-计算器(随机数字运算验证码)python 中的短路逻辑Keras训练数据加载实现小结华为受限老对手受益最大?分蛋糕的人越来越多了!