EVANYOU尤大个人网站主页CANVAS三角彩带效果分析学习
尤雨溪网站三角彩带效果
效果：
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas></canvas>
</body>
<script>
var c = document.getElementsByTagName('canvas')[0],
x = c.getContext('2d'),
pr = window.devicePixelRatio || 1,
/*devicePixelRatio
*devicePixelRatio = screenPhysicalPixels/deviceIndependentPixels
*eg.iPhone4s,Resolution:960*640
* screenPhysicalPixels=640px
* deviceIndependentPixels=320px
* devicePixelRatio=640/320=2
*You need set diff-size imgs to fit the devicePixelRatio.
*/
w = window.innerWidth,
h = window.innerHeight,
f = 90, // InitialDistance
q,
z = Math.random,
r = 0
u = Math.PI * 2,
v = Math.cos
c.width = w * pr
c.height = h * pr
x.scale(pr, pr) // Synchronization with devicePixelRatio
x.globalAlpha = 0.6 // gloabalAlpha set or return the opacity-value of draw
function i() {
x.clearRect(0, 0, w, h) // clear all rect
q = [{x: 0, y: h * .7 + f},{x: 0, y: h * .7 - f}]
while(q[1].x < w + f)d(q[0], q[1]); // w + f
}
function d(i ,j) {
x.beginPath()
x.moveTo(i.x, i.y)
x.lineTo(j.x, j.y)
var k = j.x + (z() * 2 - 0.25) * f,
// x->[-0.25 * f, 1.75 * f]
// x_average = 0.75 * 90 = 67.5
// number_rects = 1080 / 67.5 = 16
n = y(j.y)
/*When k < 0:
*The first rect will be invisable, it is in the window's left.
*So we can see the first line on the window sometimes changes the initial position.
*/
x.lineTo(k ,n)
x.closePath()
r -= u / -50
x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16)
/*ColorSelectionAlgorithm
* v=Math.cos,u=2*Math.Pi,r = n * Math.PI/25(n=0,1,2...)
* (R,G,B)=>Hexadecimal === (R << 16|G << 8|B).toString(16)
* 0xFFFFFF = 16777215
* It's equate to:
* R = cos(r)*127+128
* G = cos(r+2*PI/3)*127+128
* B = cos(r+4*PI/3)*127+128
* 128 << 16 === 128 * (2 ** 16)
*/
x.fill()
q[0] = q[1] // old point -> new q[0]
q[1] = {x: k, y: n} // new point(k, n) -> new q[1]
// constant line
}
function y(p) {
var t = p + (z() * 2 - 1.1) * f
return (t > h || t < 0) ? y(p) : t
// y->[-1.1, 0.9)
}
document.onclick = i
i()
</script>
<style>
html, body {
overflow: hidden;
margin: 0;
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: none;
/*pointer-events
*DefaultValue: Auto
*Inheritable: Yes
*Animated: No
*Computed: Appoint
*Value:
* auto
* none--element will never be the target of mouse-events
*Ins:
*BasicSupport:IE(11.0+)FF(3.6+)Chrome(4.0+)Safari(6.0)Opera(15.0)
*/
}
</style>
</html>
技巧点
- 为了适应不同物理大小及缩放比例屏幕, 保证像素一致性:
- 画布大小 = innerWidth * devicePixelRatio
- canvas缩放变换 x.scale(devicePixelRatio, devicePixelRatio)
- 颜色区间取值算法
- 颜色递减因子
r -= Math.PI * 2 / -50, 负的360度*五十分之一, 从1->0 - x.fillStyle = '#' + (cos(r) * 127 + 128 << 16 | cos(r + Math.PI / 3) * 127 + 128 << 8 | cos(r + Math.PI / 3 * 2) * 127 + 128).toString(16)
随便取一组:
#fd334e
#fb275d
#f61c6d
#ef137d
#e60b8d
#dc069d
#d002ac
#c401ba
#b601c8
#a703d4
#9708e0
#870ee9
#7816f1
#681ff7
#582bfc
#4937fe
#3b45fe
#2f53fd
#2362f9
#1972f4
调色是项艺术,自行追究.
- 三角形点算法
function y(p) {
var t = p + (z() * 2 - 1.1) * f
return (t > h || t < 0) ? y(p) : t
// y->[-1.1, 0.9)
}
EVANYOU尤大个人网站主页CANVAS三角彩带效果分析学习的更多相关文章
- 各大就业网站对web前端的就业要求
今日与女神有约,在[web前端学习部落22群]有直播公开课,喜欢的朋友赶紧加入吧!随着高等教育的普及,高校毕业生的人数每年都以极快的速度增长,数据显示,2016年,高校毕业生多达765万人,比2015 ...
- 随笔之——各大热门网站search 搜索框的写法，浅析！
随笔之——各大热门网站search 搜索框的写法,浅析! 关于搜索框,写法有很多种,搜索框这一块是一个比较细的活,要先计算好他的高.宽: 下面我就以京东搜索框为例,给大家浅析一下. 上面就是最终s ...
- 如何使用油猴脚本不要vip就能观看各大视频网站如腾讯，爱奇艺等的vip视频
如何使用油猴脚本不要vip就能观看各大视频网站如腾讯,爱奇艺等的vip视频 首先打开谷歌商店(这里需要fq,如不能fq的小伙伴请看上面写的Chrome怎么访问外网) 搜索Tampermonkey,点击 ...
- pre-commit 钩子，代码质量检查：在 vue-cli 3.x 版本中，已经使用尤大改写的yorkie，yorkie实际是fork husky，然后做了一些定制化的改动，使得钩子能从package.json的 "gitHooks"属性中读取
pre-commit 钩子,代码质量检查:在 vue-cli 3.x 版本中,已经使用尤大改写的yorkie,yorkie实际是fork husky,然后做了一些定制化的改动,使得钩子能从packag ...
- team330团队铁大兼职网站使用说明
项目名称:铁大兼职网站 项目形式:网站 网站链接:http://39.106.30.16:8080/zhaopinweb/mainpage.jsp 开发团队:team330 网站上线时间:2018年1 ...
- Tengine是由淘宝网发起的Web服务器项目。它在Nginx的基础上，针对大访问量网站的需求，添加了很多高级功能和特性
简介 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.Tengine的性能和稳定性已经在大型的网站如淘宝网,天猫商城等得到了很 ...
- Hexo + Github Pages搭建个人网站主页
1.GitHub创建个人仓库 登录GitHub创建账号,同时拥有一个自己设定的用户名(username).点击New Repositories创建仓库.仓库名必须为username.github.io ...
- 做PPT必备的大数据分析网站，好看又免费的报表工具
小明以前是学技术,跳槽来到一家大公司,在这个公司里会经常开会,比如有月度报告.季度报告以及年度报告,在开会前小明了解到同事们都会制作精美的PPT来汇报工作计划和目标,看到同事们精美的PPT里各种好看的 ...
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...
随机推荐
- C++面试常见问题——16函数模板的使用
函数模板的使用 函数模板在使用之前必须在外部对函数模板进行初始化. 函数模板的实例化包含两中 1.隐式实例化: template <class T> //没有: T Fun(T a,T b ...
- python 文本文件操作
文件操作三步走:打开.读写.关闭. open(file, mode='r', buffering=-1, encoding=None, errors=None, newline=None, close ...
- 深度学习之常用linux命令总结
深度学习中常用linux命令总结 1.创建文件夹 mkdir 文件名2.删除文件 rm -d 目录名 #删除一个空目录 rmdir 目录名 #删除一个空目录 rm -r 目录名 #删除一个非空目录 r ...
- DNS and Bind
DNS : 工作在应用层 DNS 作用 : 完成域名到IP的解析过程 FQDN --> IP 例如 : www.ifeng.com --> 123.103.122.24 D ...
- C++ mfc 简易文本编辑器 遇到的一些问题
[题目40]简易文本编辑器. 设计一个简易的文本编辑器. 设计要求: (1) 具有图形菜单界面: (2) 查找,替换(等长,不等长),插入(插串,文本块的插入).文本块移动(行块,列块移动),删除; ...
- Window Server 2019 配置篇（6）- 利用组策略实现域内自动安装软件
上次我们建立了WSUS实现了更新管理,那么现在我们需要的是让集群内的客户机(之后会建立在hyper-v集群上)和服务器都能装上三个软件 1. Microsoft Team 2. Notepad++ 3 ...
- Python 编写代码 检查是否遵循PEP 8标准
实际上并非必须遵守PEP 8,但是它已经成为一个默认的.约定俗成的规则,可以使代码风格更统一,提高可读性. 由于最近一直在学习Ubuntu,因此此处仍然以Ubuntu为例,介绍一下规则检查工具,它能帮 ...
- Codeforces 2A ：winner
A. Winner time limit per test 1 second memory limit per test 64 megabytes input standard input outpu ...
- .Net 笔记
1.介绍 .net一般指.Net Framework框架.一种平台,一种技术. C#是一种编程语言,可以开发基于.net平台的应用. .Net Framework是框架是.Net平台不可缺少的一部分, ...
- Android Studio真机调试安装以后打开闪退，打包APK再安装正常打开没有问题
一直真机调试都没有问题, 但是有一次开始,真机调试正常安装没有问题,但是一打开就崩溃了一眨眼间就像被光闪了一下的那种. oppoR11调试会这样,但是用魅族试过没有问题, 报错出现过Android S ...