canvas实现webgl线圈绕组动画效果代码-html代码-BFW代码库

canvas实现webgl线圈绕组动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现webgl线圈绕组动画效果代码，可通过dat.gui更换图形，选择圆圈、星星等图形样式、还可更改背景颜色。

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
    background-color: #fff;    
    margin: 0;
		overflow: hidden;
}
canvas {
	position: absolute;
  background-color: #999;
  width: 100%;
  height: 100%;
  vertical-align: middle;
	display:inline-block;
}
</style>



</head>

<body >

<canvas id="canvas"></canvas>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
      <script  >
/*
*  The winding number of a point describes how many full revolutions a curve makes around it.
*  Open curves produce interesting visuals. We discretise parametric curves into linear
*  segments and find the signed angle between the vectors connecting a point to the segment.
*  The sum of these angles, divided by 2PI radians, gives the winding number.
*
*  Based on:
*      https://en.wikipedia.org/wiki/Winding_number
*  [1] https://igl.ethz.ch/projects/winding-number/
*      https://twitter.com/keenanisalive/status/14480363.........完整代码请登录后点击上方下载按钮下载查看