html5怎么在index设置背景,index.html · huangliusong/HTML5Canvas知乎登录页面动态线条背景动画代码 - Gitee.com...
body{
text-align: center;
background: #F7FAFC;
overflow: hidden;
background: #fff;
}
//定义画布宽高和生成点的个数
var WIDTH = window.innerWidth, HEIGHT = window.innerHeight, POINT = 35;
var canvas = document.getElementById('Mycanvas');
canvas.width = WIDTH,
canvas.height = HEIGHT;
var context = canvas.getContext('2d');
context.strokeStyle = 'rgba(0,0,0,0.02)',
context.strokeWidth = 1,
context.fillStyle = 'rgba(0,0,0,0.05)';
var circleArr = [];
//线条:开始xy坐标,结束xy坐标,线条透明度
function Line (x, y, _x, _y, o) {
this.beginX = x,
this.beginY = y,
this.closeX = _x,
this.closeY = _y,
this.o = o;
}
//点:圆心xy坐标,半径,每帧移动xy的距离
function Circle (x, y, r, moveX, moveY) {
this.x = x,
this.y = y,
this.r = r,
this.moveX = moveX,
this.moveY = moveY;
}
//生成max和min之间的随机数
function num (max, _min) {
var min = arguments[1] || 0;
return Math.floor(Math.random()*(max-min+1)+min);
}
// 绘制原点
function drawCricle (cxt, x, y, r, moveX, moveY) {
var circle = new Circle(x, y, r, moveX, moveY)
cxt.beginPath()
cxt.arc(circle.x, circle.y, circle.r, 0, 2*Math.PI)
cxt.closePath()
cxt.fill();
return circle;
}
//绘制线条
function drawLine (cxt, x, y, _x, _y, o) {
var line = new Line(x, y, _x, _y, o)
cxt.beginPath()
cxt.strokeStyle = 'rgba(0,0,0,'+ o +')'
cxt.moveTo(line.beginX, line.beginY)
cxt.lineTo(line.closeX, line.closeY)
cxt.closePath()
cxt.stroke();
}
//初始化生成原点
function init () {
circleArr = [];
for (var i = 0; i < POINT; i++) {
circleArr.push(drawCricle(context, num(WIDTH), num(HEIGHT), num(15, 2), num(10, -10)/40, num(10, -10)/40));
}
draw();
}
//每帧绘制
function draw () {
context.clearRect(0,0,canvas.width, canvas.height);
for (var i = 0; i < POINT; i++) {
drawCricle(context, circleArr[i].x, circleArr[i].y, circleArr[i].r);
}
for (var i = 0; i < POINT; i++) {
for (var j = 0; j < POINT; j++) {
if (i + j < POINT) {
var A = Math.abs(circleArr[i+j].x - circleArr[i].x),
B = Math.abs(circleArr[i+j].y - circleArr[i].y);
var lineLength = Math.sqrt(A*A + B*B);
var C = 1/lineLength*7-0.009;
var lineOpacity = C > 0.03 ? 0.03 : C;
if (lineOpacity > 0) {
drawLine(context, circleArr[i].x, circleArr[i].y, circleArr[i+j].x, circleArr[i+j].y, lineOpacity);
}
}
}
}
}
//调用执行
window.onload = function () {
init();
setInterval(function () {
for (var i = 0; i < POINT; i++) {
var cir = circleArr[i];
cir.x += cir.moveX;
cir.y += cir.moveY;
if (cir.x > WIDTH) cir.x = 0;
else if (cir.x < 0) cir.x = WIDTH;
if (cir.y > HEIGHT) cir.y = 0;
else if (cir.y < 0) cir.y = HEIGHT;
}
draw();
}, 16);
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史
html5怎么在index设置背景,index.html · huangliusong/HTML5Canvas知乎登录页面动态线条背景动画代码 - Gitee.com...相关推荐
- Hexo博客主题Next添加动态线条背景canvas_nest
欢迎光临我的博客查看最新文章: https://river106.cn Hexo 版本:5.4.0 Next版本:8.7.1 为了美化Hexo博客,可以给博客添加动态线条背景,这里使用canvas_ ...
- 爱情树的html代码,index.html · RuanJiaFeng/爱情树 Html5实现唯美表白动画代码 - Gitee.com...
jQuery+Html5实现唯美表白动画代码 .STYLE1 { color: #666666 } 本页面采用HTML5编辑,目前您的浏览器无法显示,请换成谷歌(Chrome)或者火狐(Firefox ...
- 登录页面(动态背景)
第一步:构建HTML框架 简介:本文用最通俗的语言,一步步教会大家CSS构建登录页面. 首先构建HTML框架,包含用户名,密码,记住密码,注册这几个功能. 如果大家HTML不牢固,请看我的这篇博客:h ...
- 前端实现滑动页面动态切换背景图片的炫酷效果
我发现好的网站都用了如下GIF的模块与背景图片切换的效果,这让在下心痒痒的,所以自己动手写了一遍发现蛮简单的,分享给大家! 思路说明: 首先我的思路是介个样子的:先让一个空的宽度高度都占满的div孩子 ...
- php网站后台登录背景,wordpress后台登录页面logo/链接/背景修改(自定义)
wordpress后台登录页面logo链接默认是链接到https://cn.wordpress.org/,logo图标是一个W图,没有背景图.为了个性化,很多wordpress网站后台都进行了自定义W ...
- fastadmin后台login登录页面增加canvas粒子动画背景
地址演示地址登录 <!DOCTYPE html> <html> <head><link rel="stylesheet" media=&q ...
- 网页动态背景——随鼠标变换的动态线条(鼠标蜘蛛网特效)
网页动态背景--随鼠标变换的动态线条 效果图如下 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv=& ...
- pandas自定义设置dataframe每个索引的标签、自定义设置索引的列名称(customize index name and index label)
pandas自定义设置dataframe每个索引的标签.自定义设置索引的列名称(customize index name and index label) 目录
- index seek与index scan
低效 Index Scan(索引扫描):就全扫描索引(包括根页,中间页和叶级页): 高效 Index Seek(索引查找):通过索引向前和向后搜索 : 解释解释index seek和index sca ...
最新文章
- python输入字符串转换为公式_python从字符串转换为boolean ?
- MVC3教程之新手入门(转)
- 水晶报表的显示与打印不一至问题
- 安卓adapter适配器作用_自带安卓系统的便携屏,能玩出什么花样?
- 传统推荐系统算法(一):协同过滤(Collaborative Filtering,CF)
- linux指定网卡走流量,Linux实时输出指定网卡流量
- ant 中日历组件中英文混杂解决办法
- 基于51单片机的红外遥控电风扇
- 移动端web设计尺寸_移动端之Web及app设计尺寸
- 2016年虾神公众号预告
- python dataset_数据管道Dataset
- 二进制有符号数补码计算器
- 2022年中国工业软件市场现状及发展前景预测分析
- Linux基础,系统概叙与虚拟机搭建+CentOS系统安装(建议收藏)
- python小项目超级大脑抱香_“超级大脑”来了!丰泽区建成全市首个区县级大数据中心...
- 创建视图时插入自增id
- [猿来小课]Python开发入门第三讲:Python的安装
- matlab 取点画图,matlab绘图小技巧-图像光滑数据取点
- 内网穿透工具NATAPP(MAC、Windows、Linux通用)
- 2005年上半年网络管理员考试
热门文章
- python中文转拼音不用第三方库_又一个奇葩要求,Python是如何将“中文”转“拼音”的?...
- 如何解决常见的 Active Directory 复制错误
- PolarDB-X 云原生分布式数据库 > 最佳实践 > 如何选择分片数
- Spring MVC学习总结(4)——SpringMVC权限管理
- 线性插值改变图像尺寸_【图像分割模型】实例分割模型—DeepMask
- 材料凝固计算机模拟,颗粒增强金属基复合材料凝固过程的计算机模拟_谢国宏.pdf...
- 四、Python-元组
- AJAX解惑篇(转)
- 《SEO的艺术(原书第2版)》——3.11 为意识形态影响力开展SEO
- 硅谷VC想对CIO说这些