c 获取html页面元素的位置,获取页面所有元素盒模型并画到一个canvas上 ，getBoundingClientRect()获取一个元素在页面的位置...

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.strokeRect(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

}

}()

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！