马黑黑《使用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>
一楼，绘制的是太阳花。步骤：<br />
<br />
（一）获取太阳花点数据（代码 21 行）；<br />
（二）绘制多边形图案（代码 22 行），使用的 points 是上一步的数据（sun方法）；<br />
（三）获取图案描边总长度（代码 23 行）；<br />
（四） 将上一步拿到的多边形描边总长度赋值给对应标签在CSS中所设置的变量 --len （代码 24 行）；<br />
（五）监听多边形CSS动画执行完毕，给多边形填充颜色（代码 25 行）。<br />
<br />
【注】svgdr 绘制图形时返回该图形对象，例如，22 行绘制一个多边形，它返回的就是多边形标签对象即 polygon，用 dr.elm 表示，基于 dr.elm 紧挨着的后续操作都指向它，直至绘制新的图像。</td></tr></table>
<div class="t_fsz">
dr.sun 方法参数说明：<br />
<br />
dr.sun(num, R, r);<br />
<br />
num，花瓣数；<br />
R: 太阳花从圆心到外部边界的半径（一般取值为长宽的一般，太阳花绘制在长宽一致的画布上）；<br />
r: 太阳花绘制半径 演示漂亮~谢谢友友精彩分享
页:
[1]