模拟电火花动画效果
代码语言: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