模拟电火花动画效果

代码语言:html

所属分类:动画

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

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

<style>
body {
    width: 100vw;
    height: 100vh;
    background: #222222;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

</head>
<body translate="no">
<canvas id="canvas"></canvas>

<script >
const leftCircleRadius = 25;
const rightCircleRadius = 25;
const borderSpacing = 5;

const lineCount = 5;
const lineWidth = 2;
const lineStep = 10;

const freq = 2.0;
const ampl = 50.0;

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

function setSize() {
  const s = Math.min(window.innerWidth, window.innerHeight);
  canvas.width = 3 * s / 4;
  canvas.height = 3 * s / 4;
}

function translateRotation(center_x, center_y, radius, angle) {
  const x = center_x + Math.cos(angle * Math.PI / 180) * radius;
  const y = center_y + Math.s.........完整代码请登录后点击上方下载按钮下载查看

网友评论0