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 ...
随机推荐
- vim的几种模式&快捷键
vim的几种模式&快捷键 2017年01月01日 14:05:24 阅读数:3060 一.vim的模式 基本上vim可以分为三种模式:命令模式,插入模式和底行模式,其实vim有多种模式,我们只 ...
- Python实现的远程登录windows系统功能示例
https://www.jb51.net/article/142326.htm 重点是这几本书要好好读读!: 更多关于Python相关内容感兴趣的读者可查看本站专题:<Python进程与线程操作 ...
- imple-unpack---攻防世界
拿到题目查壳没有发现.题目已经明确说了,基本上是有壳的,Linux下面看看 应该就是upx的壳了,下载upx进行脱壳,https://sourceforge.net/projects/upx/file ...
- ThinkPhp3.2.3缓存漏洞复现以及修复建议
小编作为一个php(拍黄片)的程序员,今天早上无意间看到thinkphp的缓存漏洞,小编在实际开发过程中用thinkphp3.2.3挺多的. 我们这里来复现一下漏洞 后面我会提出修复建议 首先我们下载 ...
- 0108 spring的申明式事务
背景 互联网的金融和电商行业,最关注数据库事务. 业务核心 说明 金融行业-金融产品金额 不允许发生错误 电商行业-商品交易金额,商品库存 不允许发生错误 面临的难点: 高并发下保证: 数据一致性,高 ...
- javascript中退出语句break,continue和return 比较
在 break,continue和return 三个关键字中, break,continue是一起的,return 是函数返回语句,但是返回的同时也将函数停止. 首先:break和continue两个 ...
- 吴裕雄--天生自然java开发常用类库学习笔记：RumTime类
public class RuntimeDemo01{ public static void main(String args[]){ Runtime run = Runtime.getRuntime ...
- sql server 2012插入排序后的数据到临时表无效
IF OBJECT_ID('TEMPDB..#list') IS NOT NULLBEGIN DROP TABLE TEMPDB.#list END CREATE TABLE #list(OFC_ID ...
- 剑指offer自学系列(四)
题目描述: 输入一个正整数数组,把数组里面所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个,例如输入数组{3,32,321},输出的最小数字为321323 题目分析: 如果采用穷举法,把 ...
- POJ 2155：Matrix 二维树状数组
Matrix Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 21757 Accepted: 8141 Descripti ...