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 ...
随机推荐
- 获取QQ群中的所有群友QQ
package com.jm.mail.tools; import java.io.BufferedReader; import java.io.IOException; import java.io ...
- Redis Cluster 强制kill某一个节点和shutdown某一个节点后修复过程
redis cluster 命令行,执行以下命令需登录cluster,是集群所独有的集群(cluster)CLUSTER INFO 打印集群的信息CLUSTER NODES 列出集群当前已知的所有节点 ...
- 《Netlogo多主体建模入门》笔记8
8 -GINI系数计算与 如何使用行为空间做实验 首先,我们加入保底机制. 对于每一个agent,都有一个随机的保底比例 s(每个agent的 s 不都一样,且s初始化之后不会改变) 进行交易 ...
- js加密（十二）yy.com rsa
1. url: https://aq.yy.com/ 2. target: 登录js 3. 是一个简单的rsa加密,找到加密的js文件,全部复制出来,修改一下就好. 4. 和网页中的一样
- 012、MySQL取本月第一天日期，取每个月的第一天日期
#取本月第一天 SELECT DATE_ADD( curdate( ), INTERVAL DAY ); #取往后几个月的第一天 , INTERVAL MONTH ); , INTERVAL MONT ...
- torch.nn.Conv2d()使用
API 输入:[ batch_size, channels, height_1, width_1 ] Conv2d输入参数:[ channels, output, height_2, width_2 ...
- VMWare 禁用vmem虚拟内存文件
使用 VMWare 虚拟机,虚拟机启动后,会在虚拟机目录下建立一个与虚拟内存大小相同的 .vmem文件 这个文件主要是将虚拟机内存的内容映射到磁盘,以支持在虚拟机的暂停等功能 对所有的虚拟机" ...
- js数据类型 判断
1. js数据类型(两种数据类型) 基本数据类型:null undefined number boolean symbol string 引用数据类型: array object null: 空对象 ...
- CodeForces - 862B Mahmoud and Ehab and the bipartiteness（二分图染色）
题意:给定一个n个点的树,该树同时也是一个二分图,问最多能添加多少条边,使添加后的图也是一个二分图. 分析: 1.通过二分图染色,将树中所有节点分成两个集合,大小分别为cnt1和cnt2. 2.两个集 ...
- 小程序中的web-view与h5网页之间的交互
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html web-view 基础库 1.6.4 开始支 ...