如何以位置绝对值打印到画布答案

【问题标题】：How can print to canvas with position absolute value如何以位置绝对值打印到画布
【发布时间】：2018-01-09 06:14:03
【问题描述】：

当我打印具有相对位置的画布时，好的，但是我的位置绝对值有问题，我该如何解决？

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  </head>
  <body>
      <div id="Screenshot" style="height:100px;">
          <p>This is it</p>
          <svg style="position:absolute;left:48px;top:-70px; height: 250px; width: 250px;" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250" >
              <circle id="1" cx="100" cy="100" r="25" fill="#A52A2A"></circle>
          </svg>
      </div>
      <hr />
      <input type="button" value="test" onclick="TestCV()" />
      <div id="test">

      </div>

      <!--<script src="../src/html2canvas.js"></script>-->
      <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script type="text/javascript">
        function TestCV() {
            html2canvas(document.getElementById("Screenshot")).then(function (canvas) {
                document.getElementById("test").appendChild(canvas);
            });
        }

    </script>
  </body>
</html>

【问题讨论】：

您的代码在这里不起作用，它会引发 JavaScript 错误。
thank @Sam when put "position:absolute;left:48px;top:-70px;", 它不打印任何东西，我不知道 "position:absolute" 有什么问题画布？

标签： javascript html css canvas html2canvas

【解决方案1】：

也许你的圈子超出了可见区域？如果您只有圆圈，请尝试更简单的方法：

<div id="Screenshot">
    <span>This is it</span>
    <div style="background: #A52A2A; 
                border-radius: 50%;  
                display: inline-block; 
                height: 50px; 
                width: 50px"></div>
</div>

而不是您的变体。

【讨论】：

感谢@Sam，这不是正确的答案，我在这里发布了另一个问题。我已经解释得更详细了。你能帮我吗？ stackoverflow.com/questions/48201286/…