js实现canvas台风飓风粒子聚集动画效果代码

代码语言:html

所属分类:粒子

代码描述:js实现canvas台风飓风粒子聚集动画效果代码

代码标签: 台风 飓风 粒子 聚集 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body,
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
  margin: 0;
  font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
.f {
  position: fixed;
  bottom: 5px;
  right: 15px;
  font-family: 'Arial';
  font-size: 0.7rem;
  color: #32234a;
  text-align: center;
}
.f a {
  font-size: 0.8rem;
  color: #d90368;
}
.slider {
  width: 56% !important;
}
</style>



</head>

<body >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
      <script >
/**/ /* ---- CORE ---- */
/**/const canvas = document.createElement('canvas');
/**/const context = canvas.getContext('2d');
/**/let windowWidth = canvas.width = window.innerWidth;
/**/let windowHeight = canvas.height = window.innerHeight;
/**/let origin = { x: windowWidth * 0.5, y: windowHeight * 0.5 };
/**/context.translate(origin.x, origin.y);
/**/canvas.id = 'canvas';
/**/document.body.insertBefore(canvas, document.body.firstChild);
/**/window.onresi.........完整代码请登录后点击上方下载按钮下载查看

网友评论0