javascript - 如何以位置绝对值打印到 Canvas

标签 javascript html css canvas html2canvas

当我打印相对位置的 Canvas 时,好的,但我的位置绝对值有错误,我该如何修复它?

<!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>

最佳答案

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

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

而不是您的变体。

关于javascript - 如何以位置绝对值打印到 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48162364/

相关文章:

javascript - Drupal,如何创建带有弹出模块/面板的侧边栏菜单?

javascript - JS - readAsDataURL 阻止浏览器事件

javascript - 当紧接在 div 标签下方调用脚本时会发生什么?

javascript - barlasapaydin.com 上的鱼动画

javascript - 如何处理在给定纸张上打印发票。 20 件/张,如果超过限制,则应转到下一页。最后一页的总金额

javascript - 尽管距离发生变化,如何保持速度持续时间相同

javascript - 展开/折叠多选标签 (optgroup)

javascript - 如何仅使用带有 angularjs 的选项卡打开不同的不同 View html 页面

javascript - 在 Google Chrome 中查看 HTMLElement 的内容?

html - 用另一个类覆盖 CSS 类中的第一个子类