用canvas把页面中所有元素的轮廓绘制出来

    function plot(){//绘制函数
        // 创建一个canvas画布
        const canvas=document.createElement("canvas");
        canvas.width=document.documentElement.offsetWidth;
        canvas.height=document.documentElement.offsetHeight;
        canvas.style.position='absolute';
        canvas.style.left="0";
        canvas.style.right="0";
        canvas.style.top="0";
        canvas.style.bottom="0";
        canvas.style.zIndex="99999";
        // 将画布添加到文档中
        document.body.appendChild(canvas);
        const ctx=canvas.getContext('2d');
        draw(ctx,getAllRects());
    }
    function draw(ctx,rects){
        let i=0;
        ctx.strokeStyle="red";
        window.requestAnimationFrame(_draw);//浏览器重绘前执行一下


        function _draw(){
            let{x,y,width,height}=rects[i++];
            ctx.strokeRect(x,y,width,height);
            if(i<rects.length){
                window.requestAnimationFrame(_draw);//1s重绘60次
            }else{
                console.log('dom元素遍历完了');
            }
        }
    }

    function getAllRects(){//获取页面内所有元素的函数，返回一个数组
        const allElements=document.querySelectorAll("*");//页面内所有元素
        const rects=[];
        const {x:htmlX,y:htmlY}=document.documentElement.getBoundingClientRect();//返回元素盒信息{x：x坐标，y：y坐标，width：宽度，height：高度}
        allElements.forEach(element => {
            const eachELRects=Array.from(element.getClientRects()).filter(rect=>{
                return rect.width||rect.height;
            }).map(rect=>{
                return {
                    x:rect.x-htmlX,
                    y:rect.y-htmlY,
                    rect.width,
                    height:rect.height
                }
            })
            rects.push(...eachELRects);
        });
        return rects;
    }
    plot();