devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

送给女朋友的跨年代码，来了_新年给女朋友惊喜的前端代码

作者：IT小白 | 2024-02-15 14:52:45

赞

踩

新年给女朋友惊喜的前端代码

效果展示

 素材图片

 

 

 代码

  1. <!DOCTYPE >
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8">
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  5. 	<style>
  6. 		body{margin:0;padding:0;overflow: hidden;}
  7. 		.city{width:100%;position:fixed;bottom: 0px;z-index: 100;}
  8. 		.city img{width: 100%;}
  9. 	</style>
  10. 	<title>新年快乐</title>
  11. </head>
  12. <body onselectstart = "return false">
  13.  
  14. <div style="height:700px;overflow:hidden;">
  15.  
  16. 	<canvas id='cas' style="background-color:rgba(0,5,24,1);">浏览器不支持canvas</canvas>
  17. 	<div class="city"><img src="image/1.png" alt="" /></div>
  18. 	<img src="image/2.png" alt="" id="moon" style="visibility: hidden;"/>
  19. 	<div style="display:none">
  20. 		<div class="shape">Happy</div>//此处几个单词可以替换为其他文字
  21. 		<div class="shape">Lucky</div>
  22.         <div class="shape">Surprise</div>
  23.         <div class="shape">Blessing</div>
  24.         <div class="shape">Miss</div>
  25. 	</div>
  26. 	
  27. </div>
  28. 	
  29. 	<script>
  30. 		var canvas = document.getElementById("cas");
  31. 		var ocas = document.createElement("canvas");
  32. 		var octx = ocas.getContext("2d");
  33. 		var ctx = canvas.getContext("2d");
  34. 		ocas.width = canvas.width = window.innerWidth;
  35. 		ocas.height = canvas.height = 700;
  36. 		var bigbooms = [];
  37. 	
  38. 		window.onload = function(){
  39. 			initAnimate()
  40. 		}
  41.  
  42. 		function initAnimate(){
  43. 			drawBg();
  44.  
  45. 			lastTime = new Date();
  46. 			animate();
  47. 		}
  48.  
  49. 		var lastTime;
  50. 		function animate(){
  51. 			ctx.save();
  52. 			ctx.fillStyle = "rgba(0,5,24,0.1)";
  53. 			ctx.fillRect(0,0,canvas.width,canvas.height);
  54. 			ctx.restore();
  55.  
  56.  
  57. 			var newTime = new Date();
  58.             if(newTime-lastTime>500+(window.innerHeight-767)/2){
  59. 				var random = Math.random()*100>2?true:false;
  60. 				var x = getRandom(canvas.width/5 , canvas.width*4/5);
  61. 				var y = getRandom(50 , 200);
  62. 				if(random){
  63. 					var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:x , y:y});
  64. 					bigbooms.push(bigboom)
  65. 				}
  66. 				else {
  67. 					var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:canvas.width/2 , y:200} , document.querySelectorAll(".shape")[parseInt(getRandom(0, document.querySelectorAll(".shape").length))]);
  68. 					bigbooms.push(bigboom)
  69. 				}
  70. 				lastTime = newTime;
  71. 				console.log(bigbooms)
  72. 			}
  73.  
  74. 			stars.foreach(function(){
  75. 				this.paint();
  76. 			})
  77.  
  78. 			drawMoon();
  79.  
  80. 			bigbooms.foreach(function(index){
  81. 				var that = this;
  82. 				if(!this.dead){
  83. 					this._move();
  84. 					this._drawLight();
  85. 				}
  86. 				else{
  87. 					this.booms.foreach(function(index){
  88. 						if(!this.dead) {
  89. 							this.moveTo(index);
  90. 						}
  91. 						else if(index === that.booms.length-1){
  92. 							bigbooms[bigbooms.indexOf(that)] = null;
  93. 						}
  94. 					})
  95. 				}
  96. 			});
  97. 			
  98. 			raf(animate);
  99. 		}
  100.  
  101. 		function drawMoon(){
  102. 			var moon = document.getElementById("moon");
  103. 			var centerX = canvas.width-200 , centerY = 100 , width = 80;
  104. 			if(moon.complete){
  105. 				ctx.drawImage(moon , centerX , centerY , width , width )
  106. 			}
  107. 			else {
  108. 				moon.onload = function(){
  109. 					ctx.drawImage(moon ,centerX , centerY , width , width)
  110. 				}
  111. 			}
  112. 			var index = 0;
  113. 			for(var i=0;i<10;i++){
  114. 				ctx.save();
  115. 				ctx.beginPath();
  116. 				ctx.arc(centerX+width/2 , centerY+width/2 , width/2+index , 0 , 2*Math.PI);
  117. 				ctx.fillStyle="rgba(240,219,120,0.005)";
  118. 				index+=2;
  119. 				ctx.fill();
  120. 				ctx.restore();
  121. 			}
  122. 			
  123. 		}
  124.  
  125. 		Array.prototype.foreach = function(callback){
  126. 			for(var i=0;i<this.length;i++){
  127. 				if(this[i]!==null) callback.apply(this[i] , [i])
  128. 			}
  129. 		}
  130.  
  131. 		var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); };
  132.  		
  133. 		canvas.onclick = function(){
  134. 			var x = event.clientX;
  135. 			var y = event.clientY;
  136. 			var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:x , y:y});
  137. 			bigbooms.push(bigboom)
  138. 		}
  139.  
  140. 		// canvas.addEventLisener("touchstart" , function(event){
  141. 		// 	var touch = event.targetTouches[0];
  142. 		// 	var x = event.pageX;
  143. 		// 	var y = event.pageY;
  144. 		// 	var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:x , y:y});
  145. 		// 	bigbooms.push(bigboom)
  146. 		// })
  147.  
  148. 		var Boom = function(x,r,c,boomArea,shape){
  149. 			this.booms = [];
  150. 			this.x = x;
  151. 			this.y = (canvas.height+r);
  152. 			this.r = r;
  153. 			this.c = c;
  154. 			this.shape = shape || false;
  155. 			this.boomArea = boomArea;
  156. 			this.theta = 0;
  157. 			this.dead = false;
  158. 			this.ba = parseInt(getRandom(80 , 200));
  159. 		}
  160. 		Boom.prototype = {
  161. 			_paint:function(){
  162. 				ctx.save();
  163. 				ctx.beginPath();
  164. 				ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
  165. 				ctx.fillStyle = this.c;
  166. 				ctx.fill();
  167. 				ctx.restore();
  168. 			},
  169. 			_move:function(){
  170. 				var dx = this.boomArea.x - this.x , dy = this.boomArea.y - this.y;
  171. 				this.x = this.x+dx*0.01;
  172. 				this.y = this.y+dy*0.01;
  173.  
  174. 				if(Math.abs(dx)<=this.ba && Math.abs(dy)<=this.ba){
  175. 					if(this.shape){
  176. 						this._shapBoom();
  177. 					}
  178. 					else this._boom();
  179. 					this.dead = true;
  180. 				}
  181. 				else {
  182. 					this._paint();
  183. 				}
  184. 			},
  185. 			_drawLight:function(){
  186. 				ctx.save();
  187. 				ctx.fillStyle = "rgba(255,228,150,0.3)";
  188. 				ctx.beginPath();
  189. 				ctx.arc(this.x , this.y , this.r+3*Math.random()+1 , 0 , 2*Math.PI);
  190. 				ctx.fill();
  191. 				ctx.restore();
  192. 			},
  193. 			_boom:function(){
  194. 				var fragNum = getRandom(30 , 200);
  195. 				var style = getRandom(0,10)>=5? 1 : 2;
  196. 				var color;
  197. 				if(style===1){
  198. 					color = {
  199. 						a:parseInt(getRandom(128,255)),
  200. 						b:parseInt(getRandom(128,255)),
  201. 						c:parseInt(getRandom(128,255))
  202. 					}
  203. 				}
  204.  
  205. 				var fanwei = parseInt(getRandom(300, 400));
  206. 				for(var i=0;i<fragNum;i++){
  207. 					if(style===2){
  208. 						color = {
  209. 							a:parseInt(getRandom(128,255)),
  210. 							b:parseInt(getRandom(128,255)),
  211. 							c:parseInt(getRandom(128,255))
  212. 						}
  213. 					}
  214. 					var a = getRandom(-Math.PI, Math.PI);
  215. 					var x = getRandom(0, fanwei) * Math.cos(a) + this.x;
  216. 					var y = getRandom(0, fanwei) * Math.sin(a) + this.y; 
  217. 					var radius = getRandom(0 , 2)
  218. 					var frag = new Frag(this.x , this.y , radius , color , x , y );
  219. 					this.booms.push(frag);
  220. 				}
  221. 			},
  222. 			_shapBoom:function(){
  223. 				var that = this;
  224. 				putValue(ocas , octx , this.shape , 5, function(dots){
  225. 					var dx = canvas.width/2-that.x;
  226. 					var dy = canvas.height/2-that.y;
  227. 					for(var i=0;i<dots.length;i++){
  228. 						color = {a:dots[i].a,b:dots[i].b,c:dots[i].c}
  229. 						var x = dots[i].x;
  230. 						var y = dots[i].y;
  231. 						var radius = 1;
  232. 						var frag = new Frag(that.x , that.y , radius , color , x-dx , y-dy);
  233. 						that.booms.push(frag);
  234. 					}
  235. 				})
  236. 			}
  237. 		}
  238.  
  239. 		function putValue(canvas , context , ele , dr , callback){
  240. 			context.clearRect(0,0,canvas.width,canvas.height);
  241. 			var img = new Image();
  242. 			if(ele.innerHTML.indexOf("img")>=0){
  243. 				img.src = ele.getElementsByTagName("img")[0].src;
  244. 				imgload(img , function(){
  245. 					context.drawImage(img , canvas.width/2 - img.width/2 , canvas.height/2 - img.width/2);
  246. 					dots = getimgData(canvas , context , dr);
  247. 					callback(dots);
  248. 				})
  249. 			}
  250. 			else {
  251. 				var text = ele.innerHTML;
  252. 				context.save();
  253. 				var fontSize =200;
  254. 				context.font = fontSize+"px 宋体 bold";
  255. 				context.textAlign = "center";
  256. 				context.textBaseline = "middle";
  257. 				context.fillStyle = "rgba("+parseInt(getRandom(128,255))+","+parseInt(getRandom(128,255))+","+parseInt(getRandom(128,255))+" , 1)";
  258. 				context.fillText(text , canvas.width/2 , canvas.height/2);
  259. 				context.restore();
  260. 				dots = getimgData(canvas , context , dr);
  261. 				callback(dots);
  262. 			}
  263. 		}
  264.  
  265. 		function imgload(img , callback){
  266. 			if(img.complete){
  267. 				callback.call(img);
  268. 			}
  269. 			else {
  270. 				img.onload = function(){
  271. 					callback.call(this);
  272. 				}
  273. 			}
  274. 		}
  275.  
  276. 		function getimgData(canvas , context , dr){
  277. 			var imgData = context.getImageData(0,0,canvas.width , canvas.height);
  278. 			context.clearRect(0,0,canvas.width , canvas.height);
  279. 			var dots = [];
  280. 			for(var x=0;x<imgData.width;x+=dr){
  281. 				for(var y=0;y<imgData.height;y+=dr){
  282. 					var i = (y*imgData.width + x)*4;
  283. 					if(imgData.data[i+3] > 128){
  284. 						var dot = {x:x , y:y , a:imgData.data[i] , b:imgData.data[i+1] , c:imgData.data[i+2]};
  285. 						dots.push(dot);
  286. 					}
  287. 				}
  288. 			}
  289. 			return dots;
  290. 		}
  291.  
  292. 		function getRandom(a , b){
  293. 			return Math.random()*(b-a)+a;
  294. 		}
  295.  
  296.  
  297. 		var maxRadius = 1 , stars=[];
  298. 		function drawBg(){
  299. 			for(var i=0;i<100;i++){
  300. 				var r = Math.random()*maxRadius;
  301. 				var x = Math.random()*canvas.width;
  302. 				var y = Math.random()*2*canvas.height - canvas.height;
  303. 				var star = new Star(x , y , r);
  304. 				stars.push(star);
  305. 				star.paint()
  306. 			}
  307.  
  308. 		}
  309.  
  310. 		var Star = function(x,y,r){
  311. 			this.x = x;this.y=y;this.r=r;
  312. 		}
  313. 		Star.prototype = {
  314. 			paint:function(){
  315. 				ctx.save();
  316. 				ctx.beginPath();
  317. 				ctx.arc(this.x , this.y , this.r , 0 , 2*Math.PI);
  318. 				ctx.fillStyle = "rgba(255,255,255,"+this.r+")";
  319. 				ctx.fill();
  320. 				ctx.restore();
  321. 			}
  322. 		}
  323.  
  324. 		var focallength = 250;
  325. 		var Frag = function(centerX , centerY , radius , color ,tx , ty){
  326. 			this.tx = tx;
  327. 			this.ty = ty;
  328. 			this.x = centerX;
  329. 			this.y = centerY;
  330. 			this.dead = false;
  331. 			this.centerX = centerX;
  332. 			this.centerY = centerY;
  333. 			this.radius = radius;
  334. 			this.color = color;
  335. 		}
  336.  
  337. 		Frag.prototype = {
  338. 			paint:function(){
  339. 				ctx.save();
  340. 				ctx.beginPath();
  341. 				ctx.arc(this.x , this.y , this.radius , 0 , 2*Math.PI);
  342. 				ctx.fillStyle = "rgba("+this.color.a+","+this.color.b+","+this.color.c+",1)";
  343. 				ctx.fill()
  344. 				ctx.restore();
  345. 			},
  346. 			moveTo:function(index){
  347. 				this.ty = this.ty+0.3;
  348. 				var dx = this.tx - this.x , dy = this.ty - this.y;
  349. 				this.x = Math.abs(dx)<0.1 ? this.tx : (this.x+dx*0.1);
  350. 				this.y = Math.abs(dy)<0.1 ? this.ty : (this.y+dy*0.1);
  351. 				if(dx===0 && Math.abs(dy)<=80){
  352. 					this.dead = true;
  353. 				}
  354. 				this.paint();
  355. 			}
  356. 		}
  357. 	</script>
  358.  
  359. </body>
  360. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/85127
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号