使用svgdr动态绘制图案
<div class="hEdiv" data-prev="1"><pre class="hEpre"><style>
#msvg {
display: block;
margin: auto;
border: 1px solid gray;
polygon {
stroke-dasharray: var(--len);
stroke-dashoffset: var(--len);
animation: draw 6s linear forwards;
}
}
@keyframes draw { to { stroke-dashoffset: 0; } }
</style>
<svg id="msvg" width="600" height="600" viewBox="-200 -200 400 400"></svg>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
var dr = Dr.dr(msvg);
var points = dr.sun(35, 200, 190);
dr.polygon(points, 'none', 'red', 1).set('fill-rule', 'evenodd');
var len = dr.elm.getTotalLength();
dr.elm.style.setProperty('--len', len);
dr.elm.onanimationend = () => dr.elm.setAttribute('fill', 'pink');
</script>
</pre></div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
const divs = document.querySelectorAll('.hEdiv');
const pres = document.querySelectorAll('.hEpre');
divs.forEach((div,idx) => hl.hl(div, pres));
</script> 一楼，绘制的是太阳花。步骤：
（一）获取太阳花点数据（代码 21 行）；
（二）绘制多边形图案（代码 22 行），使用的 points 是上一步的数据（sun方法）；
（三）获取图案描边总长度（代码 23 行）；
（四） 将上一步拿到的多边形描边总长度赋值给对应标签在CSS中所设置的变量 --len （代码 24 行）；
（五）监听多边形CSS动画执行完毕，给多边形填充颜色（代码 25 行）。
【注】svgdr 绘制图形时返回该图形对象，例如，22 行绘制一个多边形，它返回的就是多边形标签对象即 polygon，用 dr.elm 表示，基于 dr.elm 紧挨着的后续操作都指向它，直至绘制新的图像。 dr.sun 方法参数说明：
dr.sun(num, R, r);
num，花瓣数；
R: 太阳花从圆心到外部边界的半径（一般取值为长宽的一般，太阳花绘制在长宽一致的画布上）；
r: 太阳花绘制半径 好漂亮，真神奇，大手笔，使用svgdr竟然可以动态绘制图案{:4_199:} 马黑黑 发表于 2026-6-14 20:16
dr.sun 方法参数说明：
dr.sun(num, R, r);
好听的名字——dr.sun 方法，有原生的sun 方法吗？ 本帖最后由 杨帆 于 2026-6-14 20:58 编辑
马黑黑 发表于 2026-6-14 20:16
dr.sun 方法参数说明：
dr.sun(num, R, r);
好像R决定太阳花位置，r决定太阳花大小，对吗？ 这个动态还要会用 svgdr 绘制图案才行呢{:4_173:} 感谢黑黑的详细讲解，学习了{:4_187:} 红影 发表于 2026-6-14 20:53
这个动态还要会用 svgdr 绘制图案才行呢
这个是必须的。不过道理相同 杨帆 发表于 2026-6-14 20:53
好像R决定太阳花位置，r决定太阳花大小，对吗？
可以这么理解。此外，R 应考虑的是 viewBox 中的宽高（宽高应一致），是它的一半最好 杨帆 发表于 2026-6-14 20:47
好听的名字——dr.sun 方法，有原生的sun 方法吗？
没有原生的方法。网上找到的太阳花的点坐标位置，都基于偶数花瓣。我这个是原创的方法。 红影 发表于 2026-6-14 20:53
感谢黑黑的详细讲解，学习了
阔气了 速度这么快，秒做出来一个完美的效果{:4_199:} https://ff.xiaoqiaodali.top:5401/i/2026/06/14/6a2eae4907423.gif
马黑黑 发表于 2026-6-14 21:15
没有原生的方法。网上找到的太阳花的点坐标位置，都基于偶数花瓣。我这个是原创的方法。
好厉害了！为马老师点赞{:5_116:}{:5_116:}{:5_116:} 马黑黑 发表于 2026-6-14 21:11
这个是必须的。不过道理相同
嗯，那么多图形都可以这样做动态的呢{:4_204:} 红影 发表于 2026-6-14 23:29
嗯，那么多图形都可以这样做动态的呢
图形基本上都可以的 杨帆 发表于 2026-6-14 22:18
好厉害了！为马老师点赞
这没什么，仅需要高一数学水平就行了 小辣椒 发表于 2026-6-14 21:37
速度这么快，秒做出来一个完美的效果
速度可以调整 马黑黑 发表于 2026-6-16 18:15
这没什么，仅需要高一数学水平就行了
厉害~数学知识只是其基础的一部分吧
页:
[1]
2