canvas电磁波波动动画效果代码-html代码-BFW代码库

canvas电磁波波动动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas电磁波波动动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    :root {
  width: 100%;
  height: 100%;
  background: #050510;
  overflow: hidden;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(#120616, #050510);
  display: flex;
  align-items: center;
  justify-content: center;
}

#canvas {
  width: 100%;
  height: auto;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<canvas id="canvas"
        width="1024"
        height="768"></canvas>
<!-- partial -->
  <script>
      "use strict";
const [PI_DOUBLE, PI_HALF, PI_QUARTER] = [Math.PI * 2, Math.PI / 2, Math.PI / 4];
const COLOR_MAX = 255;
const BASE_COLOR = [0.5, 0.1, 0.45];
const POINTS_AMOUNT = 100;
const SPRING_RADIUS = 350;
const SPRING_HEIGHT = 700;
const NOIZE_MAX = 16;
const ROTATION_SPEED = 0.05;
const FL = 160;
const getRGB = ([red, green, blue]) => `rgb(${Math.floor(red * COLOR_MAX)}, ${Math.floor(green * COLOR_MAX)}, ${Math.floor(blue * COLOR_MAX)})`;
function main() {
    const canvasEl = document.getElementById('canvas');
    const context = canvasEl.getContext('2d');
    const { width, height } = canvasEl;
    let rotationDirection = 1;
    const getUpdatedPoint = (point, index, radius) => {
        const angle = point.angle + ROTATION_SPEED * rotationDirection;
        const progress = index / POINTS_AMOUNT;
        return {
            radius,
            angle,
            y: progress * SPRING_HEIGHT - SPRING_HEIGHT / 2 + Math.random() * NOIZE_MAX,
            x: Math.cos(angle) * radius,
            z: radius + Math.sin(angle) * radius * (Math.sin(progress * Math.PI) * 0.5 + 0.5)
        };
    };
    const drawSegment = (context, point, index) => {
        const perspective = FL / (point.z + FL);
        context.save();
    .........完整代码请登录后点击上方下载按钮下载查看