热门标签
热门文章
- 1Linux设备调试-GDB调试器
- 2单元测试和集成测试有什么区别_单元测试和集成测试区别
- 3fiddler抓包手机和部分app无法连接网络问题_使用fiddler无法连接网络
- 4多边形顶点的顺逆时针判断_格林公式顺时针和逆时针的区别
- 5JavaScript高级：构造函数
- 6docker镜像与容器基本的基本操作_docker ps和docker images
- 7Android 图片添加文字水印方案_安卓开发 bitmap 添加倾斜文字水印
- 8为什么我们放弃了Vue？Vue和React深度比较_前端不用vue
- 9【OpenCV】告别人工目检：深度学习技术引领工业品缺陷检测新时代
- 10程序员如何逆袭，达到财富自由？_学技术只能挣口饭,如何实现财富自由
当前位置: article > 正文
奔梦向前-代码实现炫酷网页特效-2020-04-28-8_前端绚丽的页面代码怎么写
作者：Cpp五条 | 2024-02-15 14:57:39
赞
踩
前端绚丽的页面代码怎么写
下面是整体代码，按键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;
let autoAnimate = true;
let divergeAt = 0.5;
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/85160
推荐阅读
相关标签
