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 ...
随机推荐
- 该虚拟机似乎正在使用中 如果该虚拟机未在使用请按获取所权T按钮获取他的所有权，否则，请按取消按钮以防损坏
虚拟机出现如下情况 不能够正常过使用,解决办法如下:直接进入上图中配置文件的目录下,然后删除所有的lck结尾的文件夹,然后重新启动, 然后file打开这个文件即可.重新进入虚拟机开机.
- Hexo搭建个人博客及next主题基本配置
前言 国内一些免费的博客平台比如CSDN.博客园都已经很成熟,功能齐全,已经可以满足我们的需求,帮助我们记录学习过程遇到的问题,还能分享帮助其他人解决问题.为什么还要自己动手去搭建博客呢?首先写博客是 ...
- JS+ES6 - 向数组的开头添加一个或更多元素
- 017、MySQL取第4本季度开始和结束日期
#取第4本季度开始和结束日期 SELECT QUARTER ( adddate( dy, ) ) QTR, date_add( dy, INTERVAL MONTH ) Q_start, adddat ...
- 嵊州普及Day1T2
题意:走迷宫.求走到a[n][n]需要多久. 考场上想的dfs,听老师说最多50分.代码懒得码了,知道是走迷宫就好. 正解:bfs,时间复杂度O(n). 见代码: #include<iostre ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-trash
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 用QEMU模拟运行uboot从SD卡启动Linux
平台:Qemu + vexpress-a9 u-boot:u-boot-2019.10 Linux:linux-4.14.13 之前介绍过用Qemu模拟运行uboot,然后从网络启动lin ...
- POJ 2823：Sliding Window 单调队列
Sliding Window Time Limit: 12000MS Memory Limit: 65536K Total Submissions: 48930 Accepted: 14130 ...
- ORA-22813 ORA-06512
ORA-22813:操作数值超出系统限制. 原因: 对象或集合值太大.SORT上下文中值的大小可能超过30k,或者可用内存的大小可能太大. 操作: 选择其他值并重试该操作. ORA-06512错 ...
- 死循环（endless loop）
死循环 死循环就是一个无法结束的循环.(endless loop / infinite loop) 出现死循环是因为没有设置好结束条件,循环的结束条件很重要,要充分考虑各种边界情况. 以上一篇随笔中的 ...