尤雨溪网站三角彩带效果

效果：

源码

<!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. windows目标进程注入dll

    在别的程序注入dll 步骤: ,获取目标进程ID,CreateToolhelp32Snapshot()函数; ,获取目标进程句柄,OpenProcess()函数; ,目标进程要一块内存,Virtual ...

  2. GNS3 模拟icmp路由跟踪

    R1 : conf t int f0/0 no shutdown ip add 192.168.1.1 255.255.255.0 no ip routing end R2 f0/0: conf t ...

  3. 有没有比NRF51822更好的智能穿戴蓝牙方案

    现在在智能穿戴领域市场不断的追求低功耗.低成本的蓝牙芯片.蓝牙芯片目前除了Dialog公司研制蓝牙芯片是最求超低功耗的但是对于其它性能上还比较满足不了其它领域的功能,另外NORDIC.TI的蓝牙芯片虽 ...

  4. 一个小证明（题解 P5425 Part1）

    所以这道题为什么可以这样做 嗯,我也不知道,不过我是来填坑的. \(Q\):为什么要把牛分成\(1\),\(1\)......\(N-K+1\)这样的\(K\)组呢? \(A\):我们设第\(i\)组 ...

  5. 7个现在就该学习Python 的理由【80%的人都不知道】

    Python 是一门更注重可读性和效率的语言,尤其是相较于 Java,PHP 以及 C++ 这样的语言,它的这两个优势让其在开发者中大受欢迎. 诚然,它有点老了,但仍是 80 后啊 —— 至少没有 C ...

  6. 程序员如何 10 分钟用 Python 画出蒙娜丽莎？

    之前看到过很多头条,说哪国某人坚持了多少年自学使用excel画画,效果十分惊艳.对于他们的耐心我十分敬佩. 但是作为一个程序员,自然也得挑战一下自己. 这种需求,我们十分钟就可以完成! 基本思路   ...

  7. 012.Oracle数据库，字符串文本大小写转换，转大写，转小写，首字母大写

    /*转大写*/ SELECT UPPER(TITLE_EN) FROM ME_EO WHERE ( ISSUE_DATE BETWEEN to_date( '2017-02-04', 'yyyy-MM ...

  8. 在linux上建立多个ORACLE的实例

    1.打开终端,输入如下的命令:      [root@ptest4 ~]# export DISPLAY=localhost:1       [root@ptest4 ~]# xhost + 2.切换 ...

  9. 点亮一个LED之参数传递规则

    1 说明 实验平台: JZ2440 CPU:       S3C2440 2 ARM-THUMB Procedure Call Standard(ATPCS: ARM-Thumb过程调用标准) 图1 ...

  10. vue-cli 局域网可访问配置

    vue-cli 使用官方脚手架搭建以后,本地的config配置已经没有了,默认打开localhost,无法ip访问 只要修改项目目录配置和防火墙配置 1.在项目根目录下面加一个文件vue.config ...