当前位置: 首页 > 面试题库 >

如何将HTML元素转换为canvas元素?

鲁英卫
2023-03-14
问题内容

能够将常规元素临时转换为会非常有用canvas。例如,假设我有一个div想要翻转的样式。我想动态创建画布,将其“渲染”
HTMLElement到画布中,隐藏原始元素并为画布设置动画。

能做到吗


问题答案:

抱歉,浏览器无法将HTML渲染到画布中。

如果可能的话,这将带来潜在的安全风险,因为HTML可以包含来自第三方站点的内容(尤其是图像和iframe)。如果canvas可以将HTML内容转换为图像,然后读取图像数据,则有可能从其他站点提取特权内容。

要从HTML获取画布,您必须使用drawImage和从头开始编写自己的HTML渲染器fillText,这可能是一项艰巨的任务。这里有一个这样的尝试,)但是它有点狡猾,距离完成还有很长的路要走。(它甚至尝试从头开始解析HTML /
CSS,我认为这很疯狂!从使用样式的真实DOM节点开始,并getComputedStyle使用offsetTopetal等读取样式的方式和部分位置的相对位置会更容易。)



 类似资料:
  • 问题内容: 有没有办法像这样转换HTML: 或任何其他HTML字符串插入DOM元素?(以便我可以使用appendChild())。我知道我可以执行.innerHTML和.innerText,但这不是我想要的-我确实希望能够将动态HTML字符串转换为DOM元素,以便可以在.appendChild()中传递它。 更新:似乎有些混乱。我将HTML内容放在字符串中,作为JavaScript中变量的值。该文

  • 问题内容: 有没有办法像这样转换HTML: 或任何其他HTML字符串插入DOM元素?(以便我可以使用appendChild())。我知道我可以执行.innerHTML和.innerText,但这不是我想要的- 我确实希望能够将动态HTML字符串转换为DOM元素,以便可以在.appendChild()中传递它。 更新:似乎有些混乱。我将HTML内容放在字符串中,作为JavaScript中变量的值。该

  • 我对docx4j生成的HTML有一个小问题。在95%的情况下,一切都很好。但是文档中有一些行,它们被转换成具有相同样式的多个跨。例如: 提前非常感谢!

  • 问题内容: 如何替换ajax响应中的html元素?我所知道的是删除元素,如何用ajax响应替换已删除的标签?例如: 我有这样的代码: 当我单击一个按钮时,对codeginter控制器进行了ajax调用,在这里我接收到从数据库中提取并在另一个视图中呈现的新数据,该视图从ul开始并在ul结束时结束。 在ajax成功函数中,我这样做: 问题答案: 您可以使用replaceWith(请参阅:http :/

  • 主要内容:HTML 元素,HTML 元素语法,嵌套的 HTML 元素,HTML 文档实例,HTML 实例解析,不要忘记结束标签,HTML 空元素,HTML 提示:使用小写标签HTML 文档由 HTML 元素定义。 HTML 元素 开始标签 * 元素内容 结束标签 * <p> 这是一个段落 </p> <a href="default.htm"> 这是一个链接 </a> <br> 换行   *开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。 HT

  • HTML 文档由 HTML 元素定义。 HTML 元素 开始标签 * 元素内容 结束标签 * <p> 这是一个段落 </p> <a href="default.htm"> 这是一个链接 </a> <br> 开始标签常被称为起始标签(opening tag) 结束标签常称为闭合标签(closing tag)。 HTML 元素语法 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容