canvas-网页蜘蛛网特效代码解读

VIP文章 VtoC

已于 2022-07-05 11:13:39 修改

阅读量594

点赞数 2

分类专栏： canvas-read 文章标签： javascript 前端开发语言

于 2022-07-05 11:13:15 首次发布

本文链接：https://blog.csdn.net/vet_then_what/article/details/125614094

版权

1.效果

在这里插入图片描述

2.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    !function () {
     
        function n(n, e, t) {
     
            return n.getAttribute(e) || t
        }

        function e(n) {
     
            return document.getElementsByTagName(n)
        }

        function t() {
     
            var t = e("script"), o = t.length, i = t[o - 1];
            return {
      l: o, z: n(i, "zIndex", -1), o: n(i, "opacity", .5), c: n(i, "color", "0,0,0"), n: n(i, "count", 99) }
        }

        function o() {
     
            a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, c = m.height =
                window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        }

        function i() {
     
            r.clearRect(0, 0, a, c);
            var n, e, t, o, m, l;
            s.forEach(function (i, x) {
     
                for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x -
                    .5, i.y - .5, 1, 1), e = x

最低0.47元/天解锁文章

VtoC

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
canvas-网页蜘蛛网特效代码解读

拿到代码第一感觉就是：这是人写的代码？感觉像是经过打包后的代码，但是看吧又能看得懂一点点。尝试下将其拆分成正常人能看懂的代码，发现还是有可能的，经过了一个下午的拆分，慢慢拆卸及修改变量名，改成了下面这样能让人基本不会害怕的代码：做完这一步，基本功能的实现逻辑就能懂一大半了。整个功能的基本实现是在页面上所有的随机点的随机运动下实现的。就类似下面这图：页面初始化时，给每个随机点都给一个随机方向。当这个点撞到屏幕边界时再做个镜面反射反弹继续运动。当没有鼠标时，如果某个点移动到另一个点的指定距离内时，将这两个
复制链接

扫一扫