今天分享一个让我感觉眼前一亮的Canvas背景。
在Diygod的Anotherhome发现了它,感觉好漂亮,遂就扒了下来(没错我就是个扒皮的…)。
这个Canvas背景有一种小清新的风格φ( ̄∇ ̄o),只是和我的主题风格不搭,所以只能放弃把它移植(chao xi)过来的想法。
至于预览图君,它藏在上面呐٩(ˊᗜˋ*)و
预览页面的传送门:
Evan-You
预览页面的传送门:
Evan-You
代码都在html里,不过为了方便,我还是贴一下吧。
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()
CSS:
canvas { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
最后在合适的地方加上:
<canvas></canvas>
(2)个小伙伴在吐槽
- 网站不错 哈哈哈( ´∀`)
- |´・ω・)ノ