边框左侧干扰html2canvas中的右上半径，同时在html中正确显示

Question

我正在使用css和border radius创建一个像“D”的图片，用html2canvas渲染它。

这封信是用代码创建的：

  .a2 {
      width: 1em;
      height: 1em;
      border-top-right-radius: 1em;
      border-bottom-right-radius: 1em;
      border: 4px solid black;
      border-left: 0px;
    }

问题在于，当css正确显示时，画布不是 - 画布中的右上边框在结尾处变得更薄。

这是jsfiddle：https://jsfiddle.net/x2LxvL0g/1/

怎么了？

更新

似乎border-left干扰border-top-right-radius。 我根据border-left制作了显示右上半径的动画 https://jsfiddle.net/x2LxvL0g/10/

下面的

是动画结束的屏幕：

Answer 1

查看documentation for html2canvas，您可以看到文档说明脚本没有截取页面的屏幕截图，实际上会根据信息生成画布。

  

该脚本允许您拍摄＆＃34;截图＆＃34;的网页或部分   它，直接在用户浏览器上。屏幕截图基于DOM   因此，它可能不是真实表示的100％准确   没有制作实际的屏幕截图，而是基于构建屏幕截图   页面上提供的信息。

我可以问你为什么需要在css中定义D但是想在画布上显示它？您还使用了宽度和高度的动态尺寸，但是边界宽度的静态尺寸是否有意？