能够将常规元素临时转换为会非常有用canvas。例如,假设我有一个div想要翻转的样式。我想动态创建画布,将其“渲染” HTMLElement到画布中,隐藏原始元素并为画布设置动画。
canvas
div
HTMLElement
能做到吗
抱歉,浏览器无法将HTML渲染到画布中。
如果可能的话,这将带来潜在的安全风险,因为HTML可以包含来自第三方站点的内容(尤其是图像和iframe)。如果canvas可以将HTML内容转换为图像,然后读取图像数据,则有可能从其他站点提取特权内容。
要从HTML获取画布,您必须使用drawImage和从头开始编写自己的HTML渲染器fillText,这可能是一项艰巨的任务。这里有一个这样的尝试,)但是它有点狡猾,距离完成还有很长的路要走。(它甚至尝试从头开始解析HTML / CSS,我认为这很疯狂!从使用样式的真实DOM节点开始,并getComputedStyle使用offsetTopetal等读取样式的方式和部分位置的相对位置会更容易。)
drawImage
fillText
getComputedStyle
offsetTop