当前位置:记磊博客 > 技巧-源码 > 代码实用 > 正文

作者:记磊博客

比较忧愁,比较善感,比较孩子气,比较喜欢网络技术的小子

手机扫码查看

一个超炫的Canvas背景,做网页背景挺好看

一个超炫的Canvas背景,做网页背景挺好看
预览页面的传送门:
LY-jilei

代码都在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].xh||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;
            }
记磊博客文章说明:

作者:记磊博客, 转载或复制请以 超链接形式 并注明出处 记磊博客
原文地址:https://www.ly522.com/521.html 发布于2018-05-27。
如果我的文章帮助到了你,或者给你产生了些许spark ,欢迎(-(赞助打赏)-)

本文共456个字,预计阅读时间需要2分钟。
您阅读这篇文章共花了: 0小时00分00秒
分享到:
赞(0) 打赏

评论-加入了一言 抢沙发

9 + 9 =


一个超炫的Canvas背景,做网页背景挺好看

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

时光里的点滴

应广大网友需求记磊工具箱源码需求,开通交流群, 目前禁言。资源已经上传。群稳定后开放

快速加群

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录