六边形酷科技特效单页源码

源码介绍

基于canvas画布绘制多个六边形追踪鼠标,科技感的几何图形酷炫动画特效,

单页html源码,可以做网站动态背景,喜欢的朋友可以拿去

效果截图

liubianxing.gif

完整源码


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas六角型</title>
<!--QQ沐编程 www.qqmu.com 学习QQ群:290987565  域名抢注 https://www.juming.com/t/33210x2a49c4 -->
<style>
body {background: black;overflow: hidden;/* cursor: none; */
}
</style></head>
<body><canvas id='canvas-club'></canvas><script>
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;var c = document.getElementById("canvas-club");
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var ctx = c.getContext("2d");var maxParticles = 30;
var particles = [];
var hue = 183;mouse = {};
mouse.size = 200;
mouse.x = mouse.tx = w/2;
mouse.y = mouse.ty = h/2;var clearColor = "rgba(0, 0, 0, .2)";function random(min, max){return Math.random() * (max - min) + min
}function distance(x1, y1, x2, y2){return Math.sqrt( (x1-x2)*(x1-x2) + (y1-y2)*(y1-y2) );
}function P(){}P.prototype = {init: function(){this.size = this.origSize = random(10, 100);this.x = random(0, w);this.y = Math.random() > .5 ? -this.size : h + this.size;this.speed = this.origSpeed = random(.01, .03);},draw: function(){this.distanceFromMouse = distance(this.x, this.y, mouse.x, mouse.y);ctx.strokeStyle = "hsla("+hue+", 90%, 50%, 1)";ctx.shadowColor = "hsla("+hue+", 100%, 55%, 1)";ctx.shadowBlur = this.size * 2;ctx.beginPath();ctx.moveTo(this.x + this.size * Math.cos(0), this.y + this.size *  Math.sin(0));for(var i=0; i<6; i++){ctx.lineTo(this.x + this.size * Math.cos(i * 2 * Math.PI / 6), this.y + this.size * Math.sin(i * 2 * Math.PI / 6));}   ctx.closePath();ctx.lineWidth = 3;ctx.stroke();this.update();},update: function(){if(this.distanceFromMouse > 20){this.x += (mouse.x - this.x) * this.speed;this.y += (mouse.y - this.y) * this.speed;if(this.distanceFromMouse < mouse.size){this.size += (0 - this.size) * this.speed;this.speed += .01;} else {this.size += (this.origSize - this.size) * this.speed;}} else {this.init();}}
}mouse.move = function(){if(!distance(mouse.x, mouse.y, mouse.tx, mouse.ty) <= .1){mouse.x += (mouse.tx - mouse.x) * .2;mouse.y += (mouse.ty - mouse.y) * .2;} 
};mouse.touches = function(e) {var touches = e.touches;if(touches){mouse.tx = touches[0].clientX;mouse.ty = touches[0].clientY;} else {mouse.tx = e.clientX;mouse.ty = e.clientY;}e.preventDefault();
};mouse.mouseleave = function(e){mouse.tx = w/2;mouse.ty = h/2;
};window.addEventListener("mousemove", mouse.touches);
window.addEventListener("touchstart", mouse.touches);
window.addEventListener("touchmove", mouse.touches)c.addEventListener("mouseleave", mouse.mouseleave)window.addEventListener("resize", function(){w = c.width = window.innerWidth;h = c.height = window.innerHeight;
});for(var i=1; i<=maxParticles; i++) {setTimeout(function(){var p = new P();p.init();particles.push(p);}, i * 50);
}function anim(){ctx.fillStyle = clearColor;ctx.shadowColor = clearColor;ctx.shadowBlur = 0;ctx.globalCompositeOperation = "source-over";ctx.fillRect(0,0,w, h);mouse.move();for(var i in particles){var p = particles[i];p.draw();}hue++;requestAnimationFrame(anim);
}anim();</script>
<script>
var _hmt = _hmt || [];
(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?c8249987b56687e1763167bfea967a61";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);
})();
</script>
<!--QQ沐编程 www.qqmu.com 学习QQ群:290987565  域名抢注 https://www.juming.com/t/33210x2a49c4 -->
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/915.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

项目7-音乐播放器3(删除模块+播放音乐模块设计)

1.播放音乐模块设计 1.1 请求响应设计 请求&#xff1a; { get, /music/get?pathxxx.mp3 } 响应&#xff1a; { 音乐数据本身的字节信息 } 1.2 后端代码 1. Files.readAllBytes(String path) : 读取文件中的所有字节&#xff0c;读入内存 &#xff…

SpringBoot集成FTP

1.加入核心依赖 <dependency><groupId>commons-net</groupId><artifactId>commons-net</artifactId><version>3.8.0</version></dependency> 完整依赖 <dependencies><dependency><groupId>org.springfra…

蛋白质亚细胞定位预测(生物信息学工具-017)

直奔主题&#xff0c;下面这张表图怎么制作&#xff0c;一般都是毕业论文hh&#xff0c;蛋白质的亚细胞定位如何预测&#xff1f; 01 方法 https://wolfpsort.hgc.jp/ #官网小程序&#xff0c;简单好用&#xff0c;不用R包&#xff0c;python包&#xff0c;linux程序&#x…

微服务使用SockJs+Stomp实现Websocket 前后端实例 | Vuex形式断开重连、跨域等等问题踩坑(一)

大家好&#xff0c;我是程序员大猩猩。 之前几篇文章&#xff0c;我们讲了Spring Cloud Gateway的轻量级实现&#xff0c;Nginx的配置概念与实现&#xff0c;如以下往期文章。 轻量级的Spring Cloud Gateway实践&#xff0c;实现api和websocket转发轻松实现Nginx的HTTP与WebS…

基于Springboot+Vue的Java项目-网上超市系统开发实战(附演示视频+源码+LW)

大家好&#xff01;我是程序员一帆&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &am…

平衡二叉树(后序遍历,力扣110)

解题思路&#xff1a;采取后序遍历的好处是先遍历节点得到高度&#xff0c;然后再判断高度差是否大于一&#xff0c;如果是的话就返回-1&#xff0c;不是就返回两高度中较大的高度加一就是父节点的高度 具体代码如下&#xff1a; class Solution { public: int travel(TreeN…

# 从浅入深 学习 SpringCloud 微服务架构(三)注册中心 Eureka(2)

从浅入深 学习 SpringCloud 微服务架构&#xff08;三&#xff09;注册中心 Eureka&#xff08;2&#xff09; 段子手168 1、搭建 EurekaServer 注册中心&#xff0c;使用 Eureka 的步骤&#xff1a; 1&#xff09;搭建 EurekaServer 创建工程&#xff0c;导入依赖坐标&…

论文阅读-Multiple Targets Directed Greybox Fuzzing (Hongliang Liang,2024)

标题: Multiple Targets Directed Greybox Fuzzing (Hongliang Liang,2024) 作者: Hongliang Liang, Xinglin Yu, Xianglin Cheng, Jie Liu, Jin Li 期刊: IEEE Transactions on Dependable and Secure Computing 研究问题: 发现局限性&#xff1a;之前的定向灰盒测试在有…

“中医显示器”是人体健康监测器

随着科技的进步&#xff0c;现代医学设备已经深入到了人们的日常生活中。然而&#xff0c;在这个过程中&#xff0c;我们不应忘记我们的医学根源&#xff0c;中医。我们将中医的望、闻、问、切四诊与现代科技相结合&#xff0c;通过一系列的传感器和算法将人体的生理状态以数字…

部署Hyperledger Fabric测试区块链网络

一. 快速启动区块链测试网络 启动Fabric虚拟机 将 fabric-samples.zip 拷贝进虚拟机 ubzip fabric-samples.zip 解压并重命名为fabric-samples mv fabric-samples-main fabric-samples 拷贝bin和config目录 cd fabric-samples cp ~/fabric/bin bin -r cp ~/fabric/config …

圣地亚哥 Toler 小学利用School AI帮助每个学生都有自己的聊天机器人,提高学习兴趣和效率

圣地亚哥 Toler 小学利用 AI 程序 SchoolAI 平台为学生创建个性化的聊天机器人&#xff0c;帮助他们更好地学习和提问。这个 AI 程序让学生可以在几秒钟内得到问题的答案&#xff0c;激发了他们提出更多问题的好奇心。 管理、调节和指导学生如何通过任务控制使用人工智能。 当…

Linux程序的地址空间,进程终止

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言进阶 数据结构初阶 Linux C初阶 算法 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂 一.程序的地址空间 1.1程序的地址空间的引入 我们知道frok可以创建…

【SpringBoot实战篇】获取用户详细信息

1 明确需求 1需要获取用户详细信息 2 接口文档 1基本信息 2请求参数 无 3 响应数据 响应数据类型&#xff1a;application/json 响应参数说明&#xff1a; 响应数据样例 3 思路分析 1用户名在请求头里获取 4 开发 4.1 控制器usercontroller GetMapping("/userInfo")p…

实用软件与高效工具汇总(持续更新...)

名人说&#xff1a;莫愁千里路&#xff0c;自有到来风。 ——钱珝 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、软件1、文件搜索类2、截图贴图类3、软件卸载类4、录屏gif类5、护眼调光类6、流程绘图类7、图片…

怎么压缩图片200k以下?压缩图片到指定大小

在工作中&#xff0c;会遇到在某些系统要上传照片&#xff0c;但是对于上传的照片大小有限制&#xff0c;比如限制大小不能超过200KB等&#xff0c;而外业拍摄的照片往往会超过限制的大小&#xff0c;那么这时就需要对照片进行压缩。尤其是我们在面对大量图片需要处理的时候&am…

面试经典150题——跳跃游戏 II

面试经典150题 day10 题目来源我的题解方法一 动态规划方法二 贪心 题目来源 力扣每日一题&#xff1b;题序&#xff1a;45 我的题解 方法一 动态规划 动态规划&#xff0c;当j位置可达i位置时&#xff1a;dp[i]Math.min(dp[i],dp[j]1); 时间复杂度&#xff1a;O( n 2 n^2 n…

mysql按季度统计数据

最近遇到按表里得交付时间换成季度取统计&#xff0c;如下&#xff1a; select sp.Id,sp.title,QUARTER(sp.expected_delivery_time) dateStr,CONCAT(DATE(MIN(sp.expected_delivery_time)),至,DATE(MAX(sp.expected_delivery_time))) dateStr2,sp.DemandType,sp.IndustryGrou…

centos7安装mysql5.7笔记

1 配置yum仓库 1.1更新密钥 #更新密钥 rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022 1.2 下载使用wget命令下载MySQL的repo文件 #下载使用wget命令下载MySQL的repo文件 wget https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm 2 使用…

鸿蒙系列--第一个程序HelloWorld

一、下载安装 下载DevEco Studio&#xff08;https://developer.huawei.com/consumer/cn/deveco-studio/&#xff09;并安装 二、创建第一个鸿蒙应用 Next Compile SDK&#xff1a;鸿蒙SDK版本 Mode&#xff1a;ArkTS的声明式开发范式与类Web 开发范式&#xff0c;官方主推S…

二维码如何调整样式?美化二维码生成器的用法

美化二维码功能是一个很常用的二维码编辑功能&#xff0c;一般用来修改二维码颜色、添加logo、更高码点、设置容错率等设置&#xff0c;可以通过简单的步骤将普通的黑白二维码调整成其他的样式。那么美化二维码生成器的使用方法是什么样的呢&#xff1f;下面就让小编来给大家讲…