<pre class="de1">void function () {
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.<a href="https://www.jb51.cc/tag/stroke/" target="_blank" class="keywords">stroke</a>Rect(x,height)
if (i < rects.length) {
window.requestAnimationFrame(_draw)
} else {
console.log('%cDONE','background-color: green; color: white; padding: 0.3em 0.5em;')
}
}
}
function getAllRects () {
const allElements = document.querySelectorAll('*')
const rects = []
const {x: htmlX,y: htmlY} = document.documentElement.getBoundingClientRect()
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, width: rect.width, height: rect.height
}
})
rects.push(...eachElRects)
})
return rects
}
}()
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。