时间戳

首页 > 解决方案 > 左边框干扰 html2canvas 中的右上角半径，而在 html 中正确显示

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

问题描述

我正在用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. 我根据https://jsfiddle.net/x2LxvL0g/10/制作了显示右上角半径的动画border-left

下面是动画结束的画面：

在此处输入图像描述

标签： csshtml2canvas

解决方案

Looking at the documentation for html2canvas you can see that the documentation states that the the script does not take a screenshot of the page and in fact generates a canvas based on the information.

The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

Can i ask for the reason why you need to define the D in css but then want to display it on a canvas? Also you have used a dynamic size for your width and height but then a static size for the border width, is this intentional?

推荐阅读