线条绘制美丽图案效果动画-html代码-BFW代码库

线条绘制美丽图案效果动画

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> - Dance of the planets</title>
<style>
  body {
  background: #1d1d1d;
  margin: 0;
}

select {
  display: block;
  margin: 0 auto 10px;
  width: 150px;
}

#wrapper {
  overflow: hidden;
}

#container {
  margin: 0;
  position: relative;
}

#container div {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
}
</style>

</head>
<body translate="no">
<div id="selectList"></div>
<div id=container>
<div id="stage"></div>
</div>

<script>
      var wrapper,width,height,
canvas,ctx,
planet1,planet2,
initialSelect = 0,
speedFactor,
speedScaling = 4,
orbitalScalingFactor,
tau = Math.PI * 2,
PI180 = Math.PI / 180,
system;
const mcos = Math.cos,
msin = Math.sin;

var optionList = [{ value: '3,2,0.000002,200', text: 'Earth & Venus' },
{ value: '3,1,0.000002,200', text: 'Earth & Mercury' },
{ value: '3,4,0.0000015,250', text: 'Earth & Mars' },
{ value: '3,5,0.0000005,1000', text: 'Earth & Jupiter' },
{ value: '5,6,0.0000004,10000', text: 'Jupiter & Saturn' },
{ value: '6,7,0.00000015,80000', text: 'Saturn & Uranus' }],
currentSelectValue = optionList[initialSelect].value.split(','),
planet1 = currentSelectValue[0],
planet2 = currentSelectValue[1],
orbitalScalingFactor = currentSelectValue[2],
speedFactor = currentSelectValue[3] * speedScaling;

function createList() {
  let myDiv = document.getElementById('selectList'),
  selectList = document.createElement('select');
  selectList.id = 'mySelect';
  myDiv.appendChild(selectList);
  for (let i = 0; i < optionList.length; i++) {
    let option = document.createElement('option');
    option.value = optionList[i].value;
    option.text = optionList[i].text;
    selectList.appendChild(option);
  }
  selectList.addEventListener('change', handleSelect);
}
function handleSelect(evt) {
  currentSelectValue = evt.target.value.split(',');
  planet1 = currentSelectValue[0];
  planet2 = currentSelectValue[1];
  orbitalScalingFactor = currentSelectValue[2];
  speedFactor = currentSelectValue[3] * speedScaling;
  for (let loop = system.numBodies, j = 0; j < loop; j += 1) {
    system.allBodies[j].setorbitalRadius();
    system.allBodies[j].setSpeedFactor(speedFactor);
  }
  clearCanvas();
}

const PlanetarySystem = function () {
  Object.defineProperty(this, 'x', { value: 0, writable: true });
  Object.defineProperty(this, 'y', { value: 0, writable: true });
  Object.defineProperty(this, 'allBodies', { value: [], writable: true });
  Object.defineProperty(this, 'allBodiesLookup', { value: {}, writable: true });
  Object.defineProperty(this, 'numBodies', { value: 0, writable: true });
};
PlanetarySystem.prototype.addBody = function (vo) {
  vo.parentSystem = this;
  vo.parentBody = vo.parentBody === null ? this : this.allBodiesLookup[vo.parentBody];
  let body = new PlanetaryBody(vo);
  body.update();
  this.allBodies.push(body);
  this.allBodiesLookup[vo.id] = body;
  this.numBodies += 1;
};
PlanetarySystem.prototype.setSpeedFactor = function (value) {
  for (let body, i = 0; i < this.numBodies; i++) {
    body = this.allBodies[i];
    body.setSpeedFactor(value);
  }
};
PlanetarySystem.prototype.update = function () {
  for (let body, i = 0; i < this.numBodies; i++) {
    body = this.allBodies[i];
    body.update();
  }
};

const PlanetaryBody = function (vo) {
  Object.defineProperty(this, 'id', { value: vo.id, writable: true });
  Object.defineProperty(this, 'x', { value: 0, writable: true });
  Object.defineProperty(this, 'y', { value: 0, writable: true });.........完整代码请登录后点击上方下载按钮下载查看