尤雨溪网站三角彩带效果

效果：

源码

<!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>

技巧点

  1. 为了适应不同物理大小及缩放比例屏幕, 保证像素一致性:
  • 画布大小 = innerWidth * devicePixelRatio
  • canvas缩放变换 x.scale(devicePixelRatio, devicePixelRatio)
  1. 颜色区间取值算法
  • 颜色递减因子 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

调色是项艺术,自行追究.

  1. 三角形点算法
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三角彩带效果分析学习的更多相关文章

  1. 各大就业网站对web前端的就业要求

    今日与女神有约,在[web前端学习部落22群]有直播公开课,喜欢的朋友赶紧加入吧!随着高等教育的普及,高校毕业生的人数每年都以极快的速度增长,数据显示,2016年,高校毕业生多达765万人,比2015 ...

  2. 随笔之——各大热门网站search 搜索框的写法，浅析！

    随笔之——各大热门网站search 搜索框的写法,浅析!   关于搜索框,写法有很多种,搜索框这一块是一个比较细的活,要先计算好他的高.宽: 下面我就以京东搜索框为例,给大家浅析一下. 上面就是最终s ...

  3. 如何使用油猴脚本不要vip就能观看各大视频网站如腾讯，爱奇艺等的vip视频

    如何使用油猴脚本不要vip就能观看各大视频网站如腾讯,爱奇艺等的vip视频 首先打开谷歌商店(这里需要fq,如不能fq的小伙伴请看上面写的Chrome怎么访问外网) 搜索Tampermonkey,点击 ...

  4. pre-commit 钩子，代码质量检查：在 vue-cli 3.x 版本中，已经使用尤大改写的yorkie，yorkie实际是fork husky，然后做了一些定制化的改动，使得钩子能从package.json的 "gitHooks"属性中读取

    pre-commit 钩子,代码质量检查:在 vue-cli 3.x 版本中,已经使用尤大改写的yorkie,yorkie实际是fork husky,然后做了一些定制化的改动,使得钩子能从packag ...

  5. team330团队铁大兼职网站使用说明

    项目名称:铁大兼职网站 项目形式:网站 网站链接:http://39.106.30.16:8080/zhaopinweb/mainpage.jsp 开发团队:team330 网站上线时间:2018年1 ...

  6. Tengine是由淘宝网发起的Web服务器项目。它在Nginx的基础上，针对大访问量网站的需求，添加了很多高级功能和特性

    简介 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.Tengine的性能和稳定性已经在大型的网站如淘宝网,天猫商城等得到了很 ...

  7. Hexo + Github Pages搭建个人网站主页

    1.GitHub创建个人仓库 登录GitHub创建账号,同时拥有一个自己设定的用户名(username).点击New Repositories创建仓库.仓库名必须为username.github.io ...

  8. 做PPT必备的大数据分析网站，好看又免费的报表工具

    小明以前是学技术,跳槽来到一家大公司,在这个公司里会经常开会,比如有月度报告.季度报告以及年度报告,在开会前小明了解到同事们都会制作精美的PPT来汇报工作计划和目标,看到同事们精美的PPT里各种好看的 ...

  9. 原生js实现canvas气泡冒泡效果

    说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...

随机推荐

  1. Linux ---- 查看当前TCP连接数

    一.查看哪些IP连接本机 netstat -an 二.查看TCP连接数 1)统计80端口连接数netstat -nat|grep -i "80"|wc -l 2)统计httpd协议 ...

  2. SimpleAuthenticationInfo

    public SimpleAuthenticationInfo(Object principal, Object hashedCredentials, ByteSource credentialsSa ...

  3. 图像检索：CEDD（Color and Edge Directivity Descriptor）算法 颜色和边缘的方向性描述符

    颜色和边缘的方向性描述符(Color and Edge Directivity Descriptor,CEDD) 本文节选自论文<Android手机上图像分类技术的研究>. CEDD具有抽 ...

  4. 编程题目：输入一个链表，输出该链表中倒数第k个节点

    两种方法 1.在链表的初始化数据中加入 num 数据, 每添加一个节点,num加1,每删除一个节点,num减1 查找倒数第k个元素,即 指向第一个节点的指针向后移动 num - k 步. 2.使用两个 ...

  5. python里的def 方法中->代表什么意思?

    功能注释 函数注释是关于用户定义函数使用的类型的完全可选元数据信息(请参阅PEP 3107和 PEP 484了解更多信息). 注释__annotations__ 作为字典存储在函数的属性中,对函数的任 ...

  6. 07.Delphi接口的生命周期

    在Delphi的接口中,是不需要释放的,调用完之后,接口的生命周期就结束了,如下面的例子 unit mtReaper; interface type // 定义一个接口 IBase = interfa ...

  7. gulp和npm等安装

    提前安装了node.js, https://nodejs.org/zh-cn/download/ 跟着提示安装就行,然后执行一下命令cdm看下版本号如下图就说明安装成功了 安装包里面集成了npm,然后 ...

  8. 【LeetCode】101. 对称二叉树

    题目 给定一个二叉树,检查它是否是镜像对称的. 例如,二叉树 [1,2,2,3,4,4,3] 是对称的. 1 / \ 2 2 / \ / \ 3 4 4 3 但是下面这个 [1,2,2,null,3, ...

  9. FC 与 FB 与 OB 的区别，时间标记冲突与一致性检查 有详细的步骤

    关键字1 组织块的程序是由用户自己编写. 关键字2 时间标记冲突与一致性检查 有详细的步骤. 关键字3 FC 与 FB 与 OB 的区别?   (一)功能 功能块 区别 ? FB 和FC均为 用户编写 ...

  10. leetcode（数据结构）—— 镜像二叉树

    镜像二叉树,力扣上面的的题目,这道题很简单,放出来的原因是它要求用两种解法来写这道题——递归和迭代,而且数据结构学到了树,记录自己学习的过程,以免忘了,没地方找. 题目的意图很明显,就是然你写个程序看 ...