返回

diygod的背景怎么做出来的?文章

首页 观众:102人 时间:2019.03.12 22:27 分享

css----------

canvas {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
}

html----------

<canvas></canvas>


js----------


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




效果图:

TIM截图20190312222607.jpg

萌芽
分享来自diygod.me网站中背景的制作

diygod背景,canvas

评论
评论

干巴巴的看着,不如评论一下

相关推荐