什么花

马黑黑

效果：

svg绘制代码：

<script type="module">
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = draw.dr(mydiv);

var tt = 9, /* 花瓣总数 */
	r1 = 150, /* 范围半径，即宽高一致的svg的中心坐标 */
	r2 = 145, /* 内围小半径，即图案在范围内的半径 */
	deg = 360 / tt, /* 平均角度 */
	rad = Math.PI / 180 * deg, /* 平均弧度 */
	pstr = `M${r1} ${r1}`; /* 路径字串 ：开始时移动到中心 */
//stop结点代码
var stop = `
	<stop offset="0" stop-color="magenta" />
	<stop offset="1" stop-color="teal" />
`;
//生成路径字串
for(var i = 0; i < tt; i ++) {
	var x = r1 + r2 * Math.cos(rad * i), y = r1 + r2 * Math.sin(rad * i);
	pstr += `A60 30 ${deg * i} 0 0 ${x.toFixed(2)} ${y.toFixed(2)}A60 30 ${deg * i} 1 0 ${r1} ${r1}`;
}
//创建渐变
dr.gradient('radialGradient', {id: 'rg', r: .8}, stop);
//绘制路径 ：fill使用渐变并设置填充规则
dr.path(pstr, 'url(#rg)').set('fill-rule', 'evenodd');
</script>

svgdr生成的SVG代码：

马黑黑

svgdr 渐变的创建，自动放入 <defs> 标签，无需事先创建 defs，当然创建也无妨。

然后，路径的 fill 属性，通过 url(#渐变id) 取代颜色值即可大功告成。

本例的难点不在于渐变的创建和应用，虽然意图如此。路径是个难点：使用弧形指令 A 绘制，每一次循环的弧形指令应用，都从svg中心点出发，画到指定点x、y，再运行一次A指令，从 x、y 回到中心点；每一次循环都变换角度，从而绕成一圈。用到三角函数正弦和余弦，还用到了角度转弧度的计算公式。

马黑黑

关于填充规则：fill-rule

缺省默认值是 nonzero，本例使用 evenodd，就这两个可选值

泡沫

这花图案太漂亮啦。。
这么复杂的图案，白大神你设计一句代码就可以绘制，必须封神了。。
pstr += `A60 30 ${deg * i} 0 0 ${x.toFixed(2)} ${y.toFixed(2)}A60 30 ${deg * i} 1 0 ${r1} ${r1}`;

泡沫

马黑黑 发表于 2024-11-11 20:38
svgdr 渐变的创建，自动放入  标签，无需事先创建 defs，当然创建也无妨。

然后，路径的 fill 属性，通 ...

这么难的东东是怎么算出来的。。
最强大脑堪比电脑。。帅就一个字

泡沫

马黑黑 发表于 2024-11-11 20:42
关于填充规则：fill-rule

缺省默认值是 nonzero，本例使用 evenodd，就这两个可选值

evenodd刚才还盯着这个单词看了半天，原来这一楼有说明。目前还不太明确作用在哪里

泡沫

渐变的引用也一层一层的好明白，设置颜色，创建渐变，引用渐变。。
就是这么层次分明。。结构清晰
相比较那个路径绘制的各种公式，艾玛，算友好了。。

马黑黑

醉美水芙蓉 发表于 2024-11-11 21:51
等着欣赏老师的新播放器！这个太漂亮了！

这个做小播已经很容易了吧

马黑黑

泡沫 发表于 2024-11-11 21:30
这花图案太漂亮啦。。
这么复杂的图案，白大神你设计一句代码就可以绘制，必须封神了。。
pstr  ...

找到绘制规律，一切就简单了

马黑黑

泡沫 发表于 2024-11-11 21:44
渐变的引用也一层一层的好明白，设置颜色，创建渐变，引用渐变。。
就是这么层次分明。。结构清 ...

数学很重要

红影

fill-rule属性提供了如何确定形状内部的两个选项：

nonzero——这个值通过在任何方向上绘制一条从该点到无穷远的光线，然后检查形状的一部分穿过光线的位置来确定形状中某点的“内部”。从0开始计数，每当路径段从左到右穿过光线时加1，每当路径段从右到左穿过光线时减1。计算交叉点后，如果结果为零，则该点位于路径之外。否则，它在里面。

evenodd——该值通过从任意方向绘制该点到无穷远的光线，并根据光线穿过的给定形状计算路径段的数量来确定形状中某点的“内部”。如果这个数字是奇数，那么这个点在里面; 如果连，那个点在外面。

记得学过一次，再复习一下

马黑黑

红影 发表于 2024-11-11 23:00
fill-rule属性提供了如何确定形状内部的两个选项：

nonzero——这个值通过在任何方向上绘制一条从该点到 ...

这类东东是有的抽象的。总而言之，nonzero 和 evenodd 就是确定复杂交叉区域的“内”和“外”，从而决定路径包裹着的区域哪些部分填充颜色、哪些部分不填充颜色，就酱；然后去理解内外的规则就行。

红影

这个花形漂亮，算式很奇妙，用三角函数取得xy值，再加个常数作为xy，在用角度和xy去画弧形，居然能得到这么漂亮的图形。渐变也漂亮，黑黑选得的颜色，让花儿看着那么闪亮，好像有光透出来一样

红影

问：什么花，答：神奇之花

马黑黑

红影 发表于 2024-11-11 23:11
问：什么花，答：神奇之花

梦江南

这么漂亮的花就当小播了。

马黑黑

梦江南 发表于 2024-11-12 08:22
这么漂亮的花就当小播了。

很合适的

泡沫

马黑黑 发表于 2024-11-11 22:58
找到绘制规律，一切就简单了

看着是简单的重复，可是效果一点也不简单。。
会者不难

泡沫

马黑黑 发表于 2024-11-11 22:59
数学很重要

主要是数学颜值高，整出来的效果有强烈的美感