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

大佬教程收集整理的这篇文章主要介绍了获取页面所有元素盒模型并画到一个canvas上 ，getBoundingClientRect()获取一个元素在页面的位置，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

<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.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
}
}()

大佬总结

以上是大佬教程为你收集整理的获取页面所有元素盒模型并画到一个canvas上 ，getBoundingClientRect()获取一个元素在页面的位置全部内容，希望文章能够帮你解决获取页面所有元素盒模型并画到一个canvas上 ，getBoundingClientRect()获取一个元素在页面的位置所遇到的程序开发问题。

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

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。