Javascript 无法将边界半径应用于画布（html2canvas）

html div看起来不错

但是当我使用html2canvas时，图像显示错误

背景

#ref{
    width: 360px;
    height: 360px;
    background: url(/assets/refer/bec.jpg) 0 0 no-repeat;
    background-size: cover;
    overflow: hidden;
    margin-top: 15px;
    margin-left: 70px;
    float: left;
}

我用这个取整

.circular {
    background-size: cover;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 150px;
    height: 150px;
    border-radius: 150px;
    margin: 70px auto;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}

html2canvas

html2canvas(document.getElementById("qqq"), {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  },
  width: 500,
  height: 500
});

---

我做错了什么？ty

画布可以很好地拾取边界半径。也许你的内容没有覆盖边缘，所以你看不见。尝试确保您的内容填充画布并覆盖角落

画布可以很好地拾取边界半径。也许你的内容没有覆盖边缘，所以你看不见。尝试确保您的内容填满画布并覆盖角落

这是html2canvas上报告的错误，修复程序已合并到repo中

如果您使用的是版本0.4.1，请按如下方式编辑函数calculateCurvePoints：

...
blh = borderRadius[3][0],
    blv = borderRadius[3][1];

      var halfHeight = Math.floor(height / 2);
      tlh = tlh > halfHeight ? halfHeight : tlh;
      tlv = tlv > halfHeight ? halfHeight : tlv;
      trh = trh > halfHeight ? halfHeight : trh;
      trv = trv > halfHeight ? halfHeight : trv;
      brh = brh > halfHeight ? halfHeight : brh;
      brv = brv > halfHeight ? halfHeight : brv;
      blh = blh > halfHeight ? halfHeight : blh;
      blv = blv > halfHeight ? halfHeight : blv;

    var topWidth = width - trh,
    rightHeight = height - brv,
...

---

Grom-S报告和解决此问题的功劳。

这是html2canvas上报告的错误，修复程序已合并到回购协议中

如果您使用的是版本0.4.1，请按如下方式编辑函数calculateCurvePoints：

...
blh = borderRadius[3][0],
    blv = borderRadius[3][1];

      var halfHeight = Math.floor(height / 2);
      tlh = tlh > halfHeight ? halfHeight : tlh;
      tlv = tlv > halfHeight ? halfHeight : tlv;
      trh = trh > halfHeight ? halfHeight : trh;
      trv = trv > halfHeight ? halfHeight : trv;
      brh = brh > halfHeight ? halfHeight : brh;
      brv = brv > halfHeight ? halfHeight : brv;
      blh = blh > halfHeight ? halfHeight : blh;
      blv = blv > halfHeight ? halfHeight : blv;

    var topWidth = width - trh,
    rightHeight = height - brv,
...

---

Grom-S报告和解决此问题的功劳。

据我所知，html2canvas边界半径应为最大宽度或高度的一半。在您的情况下，最大值应为75

.circular {
    background-size: cover;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 150px;
    height: 150px;
    border-radius: 75px;
    margin: 70px auto;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}

---

据我所知，html2canvas的边界半径应为最大宽度或高度的一半。在您的情况下，它应为最大75

.circular {
    background-size: cover;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 150px;
    height: 150px;
    border-radius: 75px;
    margin: 70px auto;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}

---

在使用Html2Canvas导出pdf时，我遇到了椭圆形状的问题，所以我将边框半径设置为形状宽度+高度的一半，所以问题解决了。

在使用Html2Canvas导出pdf时，我遇到了椭圆形状的问题，所以我将边框半径设置为形状宽度+高度的一半，所以问题解决了。

ops。我在safari中仍然有这个问题。但在FireFox中，图像显示正确。在Google Chrome中，画布在all.ops中不显示。我在safari中仍然有这个问题。但在FireFox中，图像显示正确。在谷歌浏览器中，画布根本不显示。嘿，railsr！我也有同样的问题，你找到解决办法了吗？非常感谢！谢谢,@用户3877230，你好。我决定不使用画布。谢谢你的回复！再见嘿railsr！我也有同样的问题，你找到解决办法了吗？非常感谢！谢谢,@用户3877230，你好。我决定不使用画布。谢谢你的回复！再见