非常有灵性的js: 源自cn.vuejs.org作者:evanyou.me

访问量: 731

今天,随着深入 angular, react, 发现到了与之并肩的框架:  vuejs.

搜索一下,居然跳出来的是 vuejs中文社区。

看到里面的文章,基本都是翻译过来的痕迹。所以就想看看是哪位朋友翻译的。

于是找到了作者: evanyou.me

文章还没来得急看,首页吸引了我:  一个白色背景上的 彩色飘带。是程序画出来的。

鼠标点一次, 飘带就重新生成一次。

极少截图的我,穿个截图吧

屏幕快照 2015 12 27 上午8.17.47

屏幕快照 2015 12 27 上午8.17.51

屏幕快照 2015 12 27 上午8.17.53

屏幕快照 2015 12 27 上午8.17.54

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

订阅/RSS Feed

Subscribe

分类/category