左边框干扰 html2canvas 中的右上角半径，而在 html 中正确显示答案

【问题标题】：Border left interferes with top-right-radius in html2canvas while shows correctly in html左边框干扰 html2canvas 中的右上角半径，而在 html 中正确显示
【发布时间】：2018-05-14 23:52:32
【问题描述】：

我正在制作带有 css 和边框半径的类似“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/

下面是动画结束画面：

【问题讨论】：

标签： css html2canvas

【解决方案1】：

查看documentation for html2canvas，您可以看到文档指出该脚本不会对页面进行截图，而是根据信息生成画布。

该脚本允许您对网页或部分内容进行“截图” 它，直接在用户浏览器上。截图基于 DOM 因此可能不是 100% 准确的真实表示，因为它不做实际截图，而是根据截图构建页面上可用的信息。

我能问一下为什么你需要在 css 中定义 D 但又想在画布上显示它的原因吗？此外，您对宽度和高度使用了动态大小，然后对边框宽度使用了静态大小，这是故意的吗？

【讨论】：

感谢您的回复。动态大小不是故意的。我在这里更改了 jsfiddle.net/x2LxvL0g/10。至于第一个问题 - 我创建了可以下载为 png 的徽标。