下面是整体代码,按键Ctrl+C复制,复制完粘贴到记事本里面,把.txt后缀改成.html然后打开就可以看到这个炫酷的特效了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>编程特趣</title>
<style>
html,body {
margin:0;
padding:0;
overflow:hidden;
background-color:#000000
}
body {
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
.canvas {
display:block;
border-radius:50%;
}
.canvas-pattern {
display:none;
}
</style>
</head>
<body>
<canvas class="canvas canvas-pattern js-canvas" width="500" height="500"></canvas>
<canvas class="canvas js-duplicate" width="500" height="500"></canvas>
<script type="text/javascript">
const canvas = document.querySelector('.js-canvas');
const ctx = canvas.getContext('2d');
const canvas2 = document.querySelector('.js-duplicate');
const ctx2 = canvas2.getContext('2d');
const dim = Math.min(window.innerWidth, window.innerHeight) * 0.95;
const w = dim;
const h = dim;
const midX = w >> 1;
const midY = h >> 1;
const PI = Math.PI;
const TO_RADIAN = PI / 180;
const maxDepth = 5;
const maxSpread = 90 * TO_RADIAN;