intellij idea汉化 机器学习 vim TCP连接 ISP firebase eking文件 usb 网页后台模板 郑州网络 jquery触发点击事件 float占几个字节 mysql增删改查语句 linux查看防火墙 random函数用法 python怎么入门 python创建文件 python服务器开发 java定义接口 java的安装 python源码下载 魔之符咒 神龙激活 js分页 js切割字符串 c语言幂函数 透视网格工具怎么取消 lol无法连接服务器 小米手环怎么连接手机 倒计时定时器 js继承的几种方式 c4d序列号 mxf是什么格式 win10工作组 python去除空格 cdr群组快捷键 currentstyle 错误1004 华安证券大智慧下载 饥荒海难最变态的人物
当前位置: 首页 > 学习教程  > 编程语言

Canvas 自由落体

2020/11/24 10:00:19 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

<!DOCTYPE html> <html lang"en" > <head> <meta charset"UTF-8"> <title>炫彩小球自由掉落</title> <style>body{margin:0;padding:0;overflow:hidden;}#title {position: absolute;top: 50%;left: 50%;transf…

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>炫彩小球自由掉落</title>
<style>
	body{margin:0;padding:0;overflow:hidden;}
	
	#title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 100px;
	border-top: 3px solid black;
	}
</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<h1 id="title">shang hai</h1>
</body>
<script>
	const canvas = document.getElementById('canvas');
	const ctx = canvas.getContext('2d');
	canvas.height = window.innerHeight;
	canvas.width = window.innerWidth;
	let particalArray = [];
	const numberOfParticales = 300;
	const titleElement = document.getElementById('title');
	let titleMeasurement = titleElement.getBoundingClientRect();
	let title = {
	  x: titleMeasurement.left,
	  y: titleMeasurement.top,
	  width: titleMeasurement.width,
	  height: 10,
	};
	class Particle {
	  constructor(x, y) {
	    this.x = x;
	    this.y = y;
	    this.size = Math.random() * 15 + 1;
	    this.weight = Math.random() * 1 + 1;
	    this.directionX = -1;
	  }
	
	  update() {
	    if (this.y > canvas.height) {
	      this.y = 0 - this.size;
	      this.weight = Math.random() * 1 + 1;
	      this.x = Math.random() * canvas.width * 1.5;
	    }
	    this.weight += 0.01;
	    this.y += this.weight;
	    this.x += this.directionX;
	    if (
	      this.x < title.x + title.width &&
	      this.x + this.size > title.x &&
	      this.y < title.y + title.height &&
	      this.y + this.size > title.y
	    ) {
	      this.y -= 4;
	      this.weight *= -0.5;
	    }
	  }
	
	  draw() {
	    ctx.fillStyle = `hsl(${this.x}, 100%, 50%)`;
	    ctx.beginPath();
	    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
	    ctx.closePath();
	    ctx.fill();
	    ctx.stroke();
	  }
	}
	
	function init() {
	  particalArray = [];
	  for (let i = 1; i < numberOfParticales; i += 1) {
	    const x = Math.random() * canvas.width;
	    const y = Math.random() * canvas.height;
	    particalArray.push(new Particle(x, y));
	  }
	}
	init();
	function animation() {
	  ctx.fillStyle = 'rgba(255,255,255,0.09)';
	  ctx.fillRect(0, 0, canvas.width, canvas.height);
	  particalArray.forEach((particle) => {
	    particle.update();
	    particle.draw();
	  });
	  requestAnimationFrame(animation);
	}
	animation();
	window.addEventListener('resize', () => {
	  canvas.width = window.innerWidth;
	  canvas.height = window.innerHeight;
	  titleMeasurement = titleElement.getBoundingClientRect();
	  title = {
	    x: titleMeasurement.left,
	    y: titleMeasurement.top,
	    width: titleMeasurement.width,
	    height: 10,
	  };
	  init();
	});
</script>
</html>

  到底了!原创不易,转载请注明出处。
在这里插入图片描述  前端的学习不是一蹴而就,不积跬步无以至千里,不积小流无以成江海。持续不断的努力才能让你我有所收获,专业的知识还得到机构去学习,培训机构的设立有其存在的必然性,你钱花对了吗?

  不辜负每一份真情,不嘲笑每一个正在努力的人,力所能及的对别人施以援手,每天都要强化自己,洗去铅华才能绽放光芒。

推荐阅读:

小鲨鱼
忍术!猫眼三勾玉
召唤神龙
旋转魔方
拟态小象


本文链接: http://www.dtmao.cc/news_show_400201.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?