Javascript Html到图像在半圆图中不起作用

我正在尝试将html div转换为图像。我有一个半圆图，但当我试图下载或预览图像的图像是不正确的。请帮忙。 我参考了这两个网站： 对于半圆： 要将html转换为图像：

请帮我得到相同的准确图像

$（文档）.ready（函数（）{
var元素=$（“#html内容持有者”）；//全局变量
var getCanvas；//全局变量
$（“#btn预览图像”）。在（'单击'，函数（）{
html2canvas（元素{
onrendered：函数（画布）{
$（“#预览图像”）.append（画布）；
getCanvas=canvas；
}
});
});
$（“#btn-Convert-Html2Image”）。在（'click'，函数（）{
var imgageData=getCanvas.toDataURL（“image/png”）；
//现在浏览器开始下载它，而不是仅仅显示它
var newData=imgageData.replace（/^data:image\/png/，“data:application/octet stream”）；
$（“#btn-Convert-Html2Image”）.attr（“下载”、“你的图片名.png”）.attr（“href”，newData）；
});
});

CodePen-半圆圆环图
身体{
背景：#1F2428；
文本对齐：居中；
字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：居中；
对齐项目：居中；
-webkit盒包：中心；
证明内容：中心；
保证金：自动；
柔性包装：包装；
框大小：边框框；
高度：100vh；
填充：30px；
}
.保证金{
利润率：25px；
}
.半甜甜圈{
--百分比：0；
--填充：#ff0；
宽度：300px；
高度：150像素；
位置：相对位置；
颜色：#fff；
字体大小：22px；
字号：600；
溢出：隐藏；
颜色：var（--填充）；
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：结束；
对齐项目：柔性端；
-webkit盒包：中心；
证明内容：中心；
框大小：边框框；
}
.半甜甜圈：之后{
内容：''；
宽度：300px；
高度：300px；
边界：50px固体；
边框颜色：rgba（0,0,0,0.15）rgba（0,0,0,0.15）var（--fill）var（--fill；
位置：绝对位置；
边界半径：50%；
左：0；
排名：0；
框大小：边框框；
-webkit变换：旋转（计算（1deg*（-45+var（--percentage）*1.8））；
变换：旋转（计算（1deg*（-45+var（--percentage）*1.8））；
-webkit动画：fillAnimation 1s易用；
动画：fillAnimation 1s轻松进入；
}
.半甜甜圈-2型{
宽度：300px；
高度：150像素；
位置：相对位置；
文本对齐：居中；
颜色：#fff；
字体大小：22px；
字号：600；
边界半径：150px 150px 0；
溢出：隐藏；
颜色：var（--填充）；
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：结束；
对齐项目：柔性端；
-webkit盒包：中心；
证明内容：中心；
框大小：边框框；
}
.semi-donut-model-2:之前，.semi-donut-model-2:之后{
内容：''；
宽度：300px；
高度：150像素；
边框：50px固态变量（--填充）；
边界顶部：无；
位置：绝对位置；
-webkit转换来源：50%0%0；
变换原点：50%0%0；
边界半径：0 0 300px 300px；
框大小：边框框；
左：0；
最高：100%；
}
.半甜甜圈-2型：之前{
边框颜色：rgba（0,0,0,0.15）；
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
.半甜甜圈-2型：之后{
z指数：3；
-webkit动画：1s fillGraphAnimation易用；
动画：1s fillGraphAnimation易用；
-webkit变换：旋转（计算（1deg*（变量（--百分比）*1.8））；
变换：旋转（计算（1deg*（变量（--百分比）*1.8））；
}
.semi-donut-model-2：悬停：之后{
不透明度：.8；
光标：指针；
}
.多重图形{
宽度：300px；
高度：150像素；
位置：相对位置；
颜色：#fff；
字体大小：22px；
字号：600；
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：结束；
对齐项目：柔性端；
-webkit盒包：中心；
证明内容：中心；
溢出：隐藏；
框大小：边框框；
}
.多重图形：之前{
内容：''；
宽度：300px；
高度：150像素；
边框：50px固体rgba（0,0,0,0.15）；
边框底部：无；
位置：绝对位置；
框大小：边框框；
-webkit转换来源：50%0%；
变换原点：50%0%；
边界半径：300px 300px 0；
左：0；
排名：0；
}
.多重图{
宽度：300px；
高度：150像素；
边框：50px固态变量（--填充）；
边界顶部：无；
位置：绝对位置；
-webkit转换来源：50%0%0；
变换原点：50%0%0；
边界半径：0 0 300px 300px；
左：0；
最高：100%；
z指数：5；
-webkit动画：1s fillGraphAnimation易用；
动画：1s fillGraphAnimation易用；
-webkit变换：旋转（计算（1deg*（变量（--百分比）*1.8））；
变换：旋转（计算（1deg*（变量（--百分比）*1.8））；
框大小：边框框；
光标：指针；
}
。多重图形。图形：之后{
内容：attr（数据名）““计数器（变量）”%”；
计数器重置：可变var（--百分比）；
背景：var（--fill）；
框大小：边框框；
边界半径：2px；
颜色：#fff；
字号：200；
字体大小：12px；
高度：20px；
填充物：3px 5px；
顶部：0px；
位置：绝对位置；
左：0；
-webkit转换：旋转（计算（-1deg*var（-百分比）*1.8））转换（-30px，0px）；
转换：旋转（计算（-1deg*var（-百分比）*1.8））转换（-30px，0px）；
-webkit过渡：0.2秒易用性；
过渡：0.2s缓进；
-webkit转换源：0 50%0；
变换原点：0 50%0；
不透明度：0；
}
.多重图形.图形：悬停{
不透明度：0.8；
}
.多重图形.图形：悬停：之后{
不透明度：1；
左：30px；
}
@-webkit关键帧填充动画{
0% {
-webkit变换：旋转（-45度）；
变换：旋转（-45度）；
}
50% {
-webkit变换：旋转（135度）；
变换：旋转（135度）；
}
}
@关键帧填充动画