前端 js + html + css 特效 001
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Code The World - Electric strings</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script>
window.requestAnimFrame = (function() {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) { window.setTimeout(callback); }
);
}); function init(elem_id) {
let canvas = document.getElementById(elem_id),
c = canvas.getContext("2d"),
w = (canvas.width = window.innerWidth),
h = (canvas.height = window.innerHeight);
c.fillStyle = "rgba(30,30,30,1)";
c.fillRect(0, 0, w, h);
return {c:c, canvas:canvas};
}
</script>
<!-- 引入外部css文件 -->
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<canvas id="canvas"></canvas>
<!-- 引入外部JavaScript文件 -->
<script type="text/javascript" src="./script.js"></script>
</body>
</html>
body, html {
margin: 0 px;
padding: 0 px;
position: fixed;
background: rgb(30,30,30);
}
window.onload = function() {
let c = init("canvas").c,
canvas = init("canvas").canvas,
w = (canvas.width = window.innerWidth),
h = (canvas.height = window.innerHeight),
mouse = { x: false, y: false },
last_mouse = {};
// initiation
function dist(p1x, p1y, p2x, p2y) {
return Math.sqrt(Math.pow(p2x - p1x, 2) + Math.pow(p2y - p1y, 2));
}
class segment {
constructor(parent, l, a, first) {
this.first = first;
if (first) {
this.pos = {
x: parent.x,
y: parent.y
};
} else {
this.pos = {
x: parent.nextPos.x,
y: parent.nextPos.y
};
}
this.l = l;
this.ang = a;
this.nextPos = {
x: this.pos.x + this.l * Math.cos(this.ang),
y: this.pos.y + this.l * Math.sin(this.ang)
};
}
update(t) {
this.ang = Math.atan2(t.y - this.pos.y, t.x - this.pos.x);
this.pos.x = t.x + this.l * Math.cos(this.ang - Math.PI);
this.pos.y = t.y + this.l * Math.sin(this.ang - Math.PI);
this.nextPos.x = this.pos.x + this.l * Math.cos(this.ang);
this.nextPos.y = this.pos.y + this.l * Math.sin(this.ang);
}
fallback(t) {
this.pos.x = t.x;
this.pos.y = t.y;
this.nextPos.x = this.pos.x + this.l * Math.cos(this.ang);
this.nextPos.y = this.pos.y + this.l * Math.sin(this.ang);
}
show() {
c.lineTo(this.nextPos.x, this.nextPos.y);
}
}
class tentacle {
constructor(x, y, l, n, a) {
this.x = x;
this.y = y;
this.l = l;
this.n = n;
this.t = {};
this.rand = Math.random();
this.segments = [new segment(this, this.l / this.n, 0, true)];
for (let i = 1; i < this.n; i++) {
this.segments.push(
new segment(this.segments[i - 1], this.l / this.n, 0, false)
);
}
}
move(last_target, target) {
this.angle = Math.atan2(target.y - this.y,target.x - this.x);
this.dt = dist(last_target.x, last_target.y, target.x, target.y) + 5;
this.t = {
x: target.x - 0.8 * this.dt * Math.cos(this.angle),
y: target.y - 0.8 * this.dt * Math.sin(this.angle)
};
if (this.t.x) {
this.segments[this.n - 1].update(this.t);
} else {
this.segments[this.n - 1].update(target);
}
for (let i = this.n - 2; i >= 0; i--) {
this.segments[i].update(this.segments[i + 1].pos);
}
if (
dist(this.x, this.y, target.x, target.y) <=
this.l + dist(last_target.x, last_target.y, target.x, target.y)
) {
this.segments[0].fallback({ x: this.x, y: this.y });
for (let i = 1; i < this.n; i++) {
this.segments[i].fallback(this.segments[i - 1].nextPos);
}
}
}
show(target) {
if (dist(this.x, this.y, target.x, target.y) <= this.l) {
c.globalCompositeOperation = "color-dodge";
c.beginPath();
c.lineTo(this.x, this.y);
for (let i = 0; i < this.n; i++) {
this.segments[i].show();
}
c.strokeStyle = "hsl("+(this.rand * 60 + 180)+",100%," + (this.rand * 60 + 25) + "%)";
c.lineWidth = this.rand * 2;
c.lineCap = "round";
c.lineJoin = "round";
c.stroke();
c.globalCompositeOperation = "source-over";
}
}
show2(target) {
c.beginPath();
if (dist(this.x, this.y, target.x, target.y) <= this.l) {
c.arc(this.x, this.y, 2 * this.rand + 1, 0, 2 * Math.PI);
c.fillStyle = "white";
} else {
c.arc(this.x, this.y, this.rand * 2, 0, 2 * Math.PI);
c.fillStyle = "darkcyan";
}
c.fill();
}
}
let maxl = 300,
minl = 50,
n = 30,
numt = 500, // 特性点的个数 500
tent = [],
clicked = false,
target = { x: 0, y: 0 },
last_target = {},
t = 0,
q = 10;
for (let i = 0; i < numt; i++) {
tent.push(
new tentacle(
Math.random() * w,
Math.random() * h,
Math.random() * (maxl - minl) + minl,
n,
Math.random() * 2 * Math.PI
)
);
}
function draw() {
//animation
if (mouse.x) {
target.errx = mouse.x - target.x;
target.erry = mouse.y - target.y;
} else {
target.errx = w / 2 + (h / 2 - q) * Math.sqrt(2) * Math.cos(t) / (Math.pow(Math.sin(t), 2) + 1) - target.x;
target.erry = h / 2 + (h / 2 - q) * Math.sqrt(2) * Math.cos(t) * Math.sin(t) / (Math.pow(Math.sin(t), 2) + 1) - target.y;
}
target.x += target.errx / 10;
target.y += target.erry / 10;
t += 0.01;
c.beginPath();
c.arc(target.x, target.y, dist(last_target.x, last_target.y, target.x, target.y)+5, 0, 2 * Math.PI);
c.fillStyle = "hsl(210,100%,80%)";
c.fill();
for (i = 0; i < numt; i++) {
tent[i].move(last_target, target);
tent[i].show2(target);
}
for (i = 0; i < numt; i++) {
tent[i].show(target);
}
last_target.x = target.x;
last_target.y = target.y;
}
canvas.addEventListener(
"mousemove",
function(e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false
);
canvas.addEventListener("mouseleave", function(e) { mouse.x = false; mouse.y = false; });
canvas.addEventListener("mousedown", function(e) { clicked = true; }, false);
canvas.addEventListener("mouseup", function(e) { clicked = false; }, false);
function loop() {
window.requestAnimFrame(loop);
// c.fillStyle="rgba(30,30,30,0.1)";
// c.fillRect(0, 0, w, h);
c.clearRect(0, 0, w, h);
draw();
}
window.addEventListener("resize", function() {
(w = canvas.width = window.innerWidth),
(h = canvas.height = window.innerHeight);
loop();
});
loop();
setInterval(loop, 1000 / 60);
};
前端 js + html + css 特效 001的更多相关文章
- 解决前端js、css缓存问题
去js标签库查询jquery.i18n.properties.js这个js引用到页面上: 新建一个配置文件:用上面的那个js方法调取配置文件里的版本号给其他的js加上: 示例: <script ...
- grunt 单独压缩多个js和css文件【转】
原文地址:http://xiaomiya.iteye.com/blog/2177877 使用grunt来压缩前端js,css文件 因为最近做的客户端本地项目有用到十几个js,js提交之前都需要压缩.用 ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- 前端小插件之手写js循环滚动特效
很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...
- 对于前端JS、Html、CSS的大小、位置是否影响网站的相应时间
1.页面中大量的注释代码.空行会影响页面的加载速度 尽量去除打断的注释代码,及空行:尽可能的使用压缩后的JS.CSS文件,太小的文件没必要压缩 2.有人说CSS样式放在页面的开头,JS文件放在页面的结 ...
- [转][前端优化]使用Combres合并对js、css文件的请求
本文转自:http://www.cnblogs.com/parry/archive/2011/01/28/Reduce_Http_Request_Using_Combres_For_Js_Css.ht ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- 压缩前端文件(html, css, js)
1:原因 在写前端代码时, 因为要尽可能的适合阅读会加入许多注释, 空格等, 这些在开发时是必要的, 但当你要发布时, 就需要让代码更加精简, 精简压缩的同时也混淆了代码, 安全性也加强了, 可以说是 ...
- 【前端】一句命令快速合并压缩 JS、CSS
引用自:一句命令快速合并 JS.CSS 在项目开发环境下,我们会把 JS 代码尽可能模块化,方便管理和修改,这就避免不了会出现一个项目自身 JS 文件数量达到10个或者更多. 而项目上线后,会要求将所 ...
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
原理 修改js和css文件 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 替换html中的js,css文件名,生成一个带版本号的文 ...
随机推荐
- Cursor 网页版来了，这下拉屎时也能工作了
大家好,我是程序员鱼皮.几天前,Cursor 官方宣布推出了网页版 AI 代理,手机上也能用,可以让 AI 帮忙回答问题.编写代码.好家伙,这下我们程序员真的可以随时随地工作了??? 虽然网上吹得天花 ...
- Xamarin.Andorid 监听 EditText 回车事件
EditText ET_Billcode.EditorAction += ET_Billcode_EditorAction; //执行方法 private void ET_Billcode_Edito ...
- .net session_cookie简介
cookie cookie是什么? 存储在客户端浏览器(客户端硬盘)中的一段数据. cookie的作用? 保存用户的状态信息.(会话跟踪)cookie的主要作用就是用来保存状态的.因为http协议是无 ...
- 【6】ST表学习笔记
前言 学习ST表,主要是倍增思想,可以理解为倍增优化后的DP.写在这里,一方面方便自己以后复习,另一方面给其他人参考. UPD on 2023/3/21 :修改了格式,使格式与其他的学习笔记统一. 倍 ...
- 1009acm
这道题有点小疑问 为什么我用sum_JavaBean+=(double)m / all_evel[j].b*all_evel[j].a;可以达到AC 用sum_JavaBean+=(double)al ...
- SQL数据库误删除数据的恢复方法整理
今天有个朋友很着急地打电话给我,他用delete语句误删除了SQL Server 2008数据库中两个表中的所有记录,而这个数据库之前没有任何备份. SQL Server中误删除数据的恢复本来不是 ...
- K8S三、实战
目录 创建第一个pod 创建Deployment 滚动升级和回滚 创建serivce 访问Service HPA 创建第一个pod kubectl create deployment nginx-de ...
- SciTech-Mathematics-Probability+Statistics-Discrete Binomial Distribution: 离散二项式分布
Binomial Distribution AI, Data Science, and Statistics Statistics and Machine Learning Toolbox Proba ...
- win10正式版如何禁止OneDrive开机启动的问题
有一位深度官网的小伙伴,在使用win10系统时发现,自带的OneDrive开机就自启动,又无法在设置取消这个开机启动项.该如何解决呢?本文中,深度技术小编就来为大家带来详细的禁止方法,可以看看参考一下 ...
- 08Java基础之面向对象
面向过程&面向对象 面向过程思想 步骤清晰简单,第一步做什么,第二步做什么 面向过程适合处理一些较为简单的问题 面向对象思想 物以类聚,分类的思维模式,思考问题首先会解决问题需要哪些分类,然后 ...