Граница влево мешает верхнему правому радиусу в html2canvas, в то время как правильно показывает в html - PullRequest
Новая
       2

Граница влево мешает верхнему правому радиусу в html2canvas, в то время как правильно показывает в html

0 голосов
/ 12 мая 2018

Я делаю изображение в виде буквы "D" с css и радиусом границы, чтобы отобразить его с помощью html2canvas.

Письмо создается с кодом: 

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

Проблема в том, чтов то время как css отображается правильно, холст - нет - верхняя правая граница холста в конце становится тоньше.

enter image description here

Вот jsfiddle: https://jsfiddle.net/x2LxvL0g/1/

Что не так?

ОБНОВЛЕНИЕ:

Кажется, что border-left мешает border-top-right-radius.Я сделал анимацию, которая показывает верхний правый радиус в зависимости от border-left https://jsfiddle.net/x2LxvL0g/10/

ниже - экран завершения анимации:

enter image description here

1 Ответ

0 голосов
/ 12 мая 2018

Глядя на документацию для html2canvas , вы можете видеть, что в документации говорится, что скрипт не делает снимок экрана страницы и фактически создает холст на основе информации.

Скрипт позволяет делать «скриншоты» веб-страниц или частей это, прямо в браузере пользователей. Скриншот основан на DOM и как таковой может не быть на 100% точным к реальному представлению, так как не делает фактический скриншот, но создает скриншот на основе информация, доступная на странице.

Могу ли я спросить причину, по которой вам нужно определить D в css, но затем вывести его на холст? Также вы использовали динамический размер для вашей ширины и высоты, но затем статический размер для ширины границы, это намеренно?

...