如何从具有所有属性的页面复制canvas元素？

Question

我找到了一个画布生成器网站。我想将画布复制到我的本地环境中进行实验。

有没有办法在chrome中检查它并仅导出其绘制的内容？

Answer 1

画布是javascript代码的结果。这些结果可以导出为gif / jpg / png。

  

HTML元素用于通过JavaScript动态绘制图形。

     

元素只是图形的容器。您必须使用JavaScript来实际绘制图形。

     

Canvas有几种绘制路径，方框，圆圈，文本和添加图像的方法。 w3schools

所以要将它作为canvas.getContext（）的返回值RenderingContext，你必须有生成它的javascript。

另一种方法是将画布结果导出为gif / jpg / png。

Answer 2

  

有没有办法在chrome中检查它并仅导出其绘制的内容？

我不确定这正是您正在寻找的，但您可以在DevTools中使用screenshots of specific HTML nodes，包括画布元素。

在我的take a screenshot of a canvas demo尝试。

  
1. 按cmd + opt + c或ctrl + shift + c打开元素面板
  
2. select the canvas element
  
3. 按cmd + shift + p或ctrl + shift + p打开命令菜单
  
4. 开始输入screenshot并选择capture node screenshot