我们有一个起点(x,y)和一个圆半径.还存在可以从贝塞尔曲线点创建路径的引擎.
如何使用Bézier曲线创建圆?
我试图将下面的代码基本上转换为可扩展的版本,我尝试使用vw和vh,%值等等,我似乎无法获得正确的值的平衡.任何帮助表示赞赏.
这个codepen也可能有所帮助:http://codepen.io/anon/pen/dPNgvP
.arrow {
position: relative;
height: 0px;
width: 0px;
border-top: 18px solid #dd1111;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
position: absolute;
bottom: 40px;
left: 57px;
z-index: 1;
animation: load-arrow 1.6s linear;
animation-fill-mode: forwards;
-webkit-animation: load-arrow 1.6s linear;
-webkit-animation-fill-mode: forwards;
}
@keyframes load-arrow {
from {
transform: translate(0, 0);
}
to {
transform: translate(0, 55px);
}
}
@-webkit-keyframes load-arrow {
from {
-webkit-transform: translate(0, 0);
}
to {
-webkit-transform: translate(0, 55px);
}
}
.pie {
width: …Run Code Online (Sandbox Code Playgroud)我用画布制作了这个圆形图.
绿色进度从顺时针120度开始,顺时针以60度结束.在画布中,你这样做
context.arc(centerx, centery,radius, startangle, endangle, anticlockwise);
Run Code Online (Sandbox Code Playgroud)
但我发现SVG太难了.任何人都可以告诉我如何从svg做到这一点.我之所以喜欢从SVG这样做是因为当动画进度时,画面的质量会在屏幕缩放时降低.顺便说一句,如果你需要一个代码,我可以给你.它具有高度可配置性:
javascript ×2
bezier ×1
canvas ×1
css ×1
css-shapes ×1
css3 ×1
geometry ×1
html ×1
html5 ×1
svg ×1