zoukankan      html  css  js  c++  java
  • 用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();  
  • 相关阅读:
    Web负载均衡的几种实现方式
    DNS负载均衡
    NoSQL开篇——为什么要使用NoSQL
    mySQL优化 my.ini 配置说明
    mysql性能优化-慢查询分析、优化索引和配置
    MySQL性能优化的最佳20+条经验
    IOS的UIPickerView 和UIDatePicker
    IOS的KVC
    IOS中的通知NSNotification
    IOS对话框UIAlertView
  • 原文地址:https://www.cnblogs.com/fqh123/p/10549059.html
Copyright © 2011-2022 走看看