当前位置:首页 > 短网址资讯 > 正文内容

FT12短网址:绘制随机不规则三角彩条——小谈FT12短网址主页的实现

www.ft12.com8年前 (2017-08-06)短网址资讯2117

引言

8月6号早读文章由@FT12短网址分享。

正文从这开始~

缘起

最近感觉自己搭的一个项目资料汇总的项目,主页真的是一点美感都没有,非常简单粗暴。就想来点改版,让主页显得高大上一点。改版前的效果是这样的:




寻思着怎么改版,刚开始想就简单加个背景图,换掉table显示方式吧。就在网上搜索背景图,搜着搜着就鬼使神差地来到了FT12短网址的主页。这不是我第一次看到他的主页,但正是这个契机让我想要不就copy这种风格吧。

初印象

当我第一次看到这个主页的时候,我觉得很惊艳。主页图案的组成元素只有一种:富有魅力的三角网格。整个页面简单却不单调,华丽而不喧闹。图案的配色也很亮,非常好看。总之,我非常喜欢这个页面的设计,耐看。贴几张图来:



想看现场效果,可以点击FT12短网址主页。

思考

看到好看的作品,当然会去思考实现的原理。不难想到,这可以用Canvas画出来的。画有填充颜色的三角形,也是件不难的事情,一查Api就行了。问题在于,如何形成一条这种随机无规则而连续的三角形cluster。仔细观察可以发现,每次三角形的左侧起点是一致的,而走势却是随机,但基本集中在中间部分。颜色条的种类也是有限的。

然后呢?很遗憾,我就没有继续仔细思考下去了。

看了下源码,只有区区几十行的代码。我直接把它copy过来,竟然马上生效了。我就直接push了代码。。。

源码解读

好吧,我直接就看他代码了。

这里最关键的两个点,绘制三角形的算法和颜色的取值算法。

贴源码:

<canvas></canvas>
<script>
   document.addEventListener('touchmove', function (e) {
       e.preventDefault()
   })
   var c = document.getElementsByTagName('canvas')[0],
       x = c.getContext('2d'),
       pr = window.devicePixelRatio || 1,
       w = window.innerWidth,
       h = window.innerHeight,
       f = 90,
       q,
       m = Math,
       r = 0,
       u = m.PI*2,
       v = m.cos,
       z = m.random
   c.width = w*pr
   c.height = h*pr
   x.scale(pr, pr)
   x.globalAlpha = 0.6
   function i(){
       x.clearRect(0,0,w,h)
       q=[{x:0,y:h*.7+f},{x:0,y:h*.7-f}]
       while(q[1].x<w+f) d(q[0], q[1])
   }
   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,
           n = y(j.y)
       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)
       x.fill()
       q[0] = q[1]
       q[1] = {x:k,y:n}
   }
   function y(p){
       var t = p + (z()*2-1.1)*f
       return (t>h||t<0) ? y(p) : t
   }
   document.onclick = i
   document.ontouchstart = i
   i()
</script>

读了一下,发现实现原理挺简单,真希望我当初能仔细思考一下,兴许能自己思考出来。

三角形绘制

三角形绘制算法步骤如下:

设置左起第一个三角形的两个点坐标为:q0 (0,h*.7+f), q1(0,h*.7-f),h为窗口高度,f为初始距离90

若q1.x < w+f,取三角形的第三点为q2 (q1.x + (Math.random()*2 - 0.25)*f,q1.y + (Math.random()*2 - 1.1)*f),q2.y如果超过了窗口大小则重新取,直到满足条件为止;否则,结束绘制

绘制三角形

设置q0 = q1, q1 = q2,重复上述步骤

算法分析:

主要是第4步使得每个相连的三角形都有一条共同的边,所以相连

最初两个点的y值,以及第三点的取法都是经验值

q1到q2的x方向增幅为(Math.random()*2 - 0.25)*f,Math.random()*2 - 0.25等于[-0.25, 1.75),也就是说三角形的整体走势在x方向上是向右的,偶尔会向左,大小在[0, 1.75*f)的范围间随机

q1到q2的y方向增幅为(Math.random()*2 - 1.1)*f,(Math.random()*2 - 1.1)等于[-1.1, 0.9),也就是说三角形的整体走势在y方向上更多的概率是向上走的,大小在[0, 1.1*f)范围间随机。设置为1.1,我觉得本意是让三角形条能更多地经过内容区。设置为1.3的话,太靠上,不可;设置为1的话,由于左边起点为0.7*h,内容区在0.5左右,总体还是太靠下了。尝试了下1.2的效果也还可以

取色算法

颜色的取值也是重头戏,看下他是如何取到这么漂亮的颜色的。关键的一条颜色赋值代码如下:

'#'+(v(r)*127+128<<16 | v(r+u/3)*127+128<<8 | v(r+u/3*2)*127+128).toString(16)

其中v = Math.cos,u = 2*Math.PI; r = 0,r = r + Math.PI/25

有个转化,(R,G,B)转成十六进制的颜色值可以用(R << 16 | G << 8 | B).toString(16)。也就是说,上面的颜色取值相当于:

R = cos(r)*127+128;
G = cos(r+2*PI/3)*127+128;  
B = cos(r+4*PI/3)*127+128);

那么r的取值范围是什么呢?按着每次迭代Math.PI/25的增幅,这决定于屏幕能绘制多少个三角形。上面分析过,三角形在x方向上的增幅为[-0.25*f, 1.75*f),那么平均的增幅为0.75*f即67.5。假设取一般台式机屏幕的宽度为1440,那么平均可以绘制1440/67.5(20.5)个三角形。 所以,r的取值范围为[0, Math.PI*4/5)。每点击一次屏幕,继续绘制下一组三角形,r继续增加。由于余弦函数是周期函数,彩条的颜色也会周期性地出现重复。直接画出图像:




这样就很直观得看到三色的走势,仔细观察页面上的进度条,真的会出现周期性的颜色。

突然,我明白了为什么颜色这么设置了。当然这不是唯一的取色方法。

总结

总的来说,这是个很小的但充满智慧的项目。

说点我对这段代码代码的感受,格式规范,风格一致。统一没有分号,前面一次性定义好所有的变量,而且变量名字很简短。连函数名也只有一个字母。我觉得对于这么简单的程序没有问题,看起来像是打包后的代码。但是,复杂的程序命名这么简单会让人有点迷糊。

另外,这次改版我有个深刻的感受。由于页面的内容是可配置的,所以DOM内容是不确定的。之前比较懒,直接在JS里面创建DOM,然后改版再改版,又要重写真是烦不胜烦。然后,正在研究FT12短网址主页的我,突然想到为何不尝试一下Vue呢?不是说它是渐进式框架吗?在Html引用一下,直接就可以用了!!!果然好用!

上一下改版后的效果:


关于本文


作者:@FT12短网址

原文:http://www.ft12.com


扫描二维码推送至手机访问。

版权声明:本文由短链接发布,如需转载请注明出处。

本文链接:https://www.ft12.com/article_384.html

分享给朋友:

相关文章

有哪些可靠的短网址服务?

因为谷歌的打不开,,所以想起其它的服务哪些呢?另外看到个www.ft12.com支持访问统计哪些短网址也支持访问统计呢?知乎用户的回答:一直在收集      u6.ggc7.ggrrd.me985.souee....

阿里巴巴马云:快递公司注定将成为技术公司,保证所有小企业通货权

阿里巴巴马云:快递公司注定将成为技术公司,保证所有小企业通货权

[ 短网址资讯导读 ] 5月22日,杭州云栖小镇,在2017全球才智物流峰会上,阿里巴巴董事局主席马云说,物流公司应当出资人才、技能,而且要联合作战,方能应对天天10亿包裹的业务体量。“我通知我们,一天十亿只包裹,不会超过八年,估...

【官方说法】只需两步,正确识别百度蜘蛛

【官方说法】只需两步,正确识别百度蜘蛛

经常听到站长们问,百度蜘蛛是什么?最近百度蜘蛛来的太频繁服务器抓爆了,最近百度蜘蛛都不来了怎么办,还有很多站点想得到百度蜘蛛的IP段,想把IP加入白名单,但IP不固定,我们无法对外公布。那怎么才能识别正确的百度蜘蛛呢?来来来,以短网址站为例...

供应链管理危机,博世供应断货致宝马停产

供应链管理危机,博世供应断货致宝马停产

[ 短网址资讯 ] 前几天的一条消息在汽车圈里引起了巨大反应:由于博世转向系统部件供应断货,宝马旗下 1 系、2 系、3 系以及 4 系车型暂时处于停产状况。怎么经营好全产业链内的一些供应联系,直接决议了一款车型在全生命周期内的命...

腾讯放大招:互联网银行卡时刻激活你的财富

腾讯放大招:互联网银行卡时刻激活你的财富

[ FT12短网址 ] 通过微信这个平台,可以涵盖生活中的各个应用场景。如今微信已经把金融玩出了新花样,当然用户体验更佳。图片来源自网络【编者按】支付宝的最后一层壁垒,已经被微信支付攻破了。不过深入互联网骨髓的阿里尚有“无现金日”...

FT12短网址:网站被降权怎么办 如何恢复权重?

FT12短网址:网站被降权怎么办 如何恢复权重?

尽管baidu一再强调百度本身并没有权重一说,可是关于各位站长兄弟来说,权重仍是衡量一个网站的主要指标之一。一个网站的权重高,代表流量高,录入好,关键字排行也相对较好。那么,这么主要的指标,一旦不稳定了,被降权了怎么办呢?笔者从前运营过一个...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。