css-doodle ：@shape之clover意外发现
<style>#hCode {
padding: 10px;
background: #eee;
}
</style>
<pre id="hCode"><css-doodle click-to-update>
@grid: 4 / 400px;
background: @p(green,darkgreen,lightgreen);
@shape: clover @r(3,5);
</css-doodle></pre>
<p><button id="btnok" type="button" value="运行代码">运行代码</button><br><br></p>
<div id="stage"></div>
<script>
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.head.appendChild(script);
btnok.onclick = () => {
let val = btnok.value;
stage.innerHTML = val === '运行代码' ? hCode.innerText : '';
btnok.value = btnok.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
}
</script>
本帖最后由 马黑黑 于 2023-6-6 07:49 编辑
css-doodle 的 @shape 属性，多叶草的指令是 clover 数值 。其中，数值取整数，三叶草取 3，四叶草取 4， 五叶草取 5，多叶草也就是这几种了，取值范围在 3 至 5 之间的整数，小于 3则等于 3，大于 5 则等于 5。
一楼的例子，我们用了 @r(3,5) 来进行取值，@r() 函数取浮点数随机数， @r(3,5) 得到的数值不是整数，而是从 3.0 到 5.0 之间的浮点数。从运行效果看，clover 的浮点数赋值是被接受的，呈现出来的图案不规整而已。不规整但却与自然界的常见现象相暗合。
一楼，运行代码后，可以点击多叶草演示区域，观察随机的变化。 <style>
.papa > p { margin: 10px 0; }
.mama { margin-left: 40px; position: relative; }
.hCode, .hLineNum { padding: 10px; width: calc(100% - 40px); background: #f9f9f9; box-sizing: border-box; overflow-x: auto; tab-size: 3; position: absolute; }
.hCode { left: 40px; margin-left: -40px; padding-left: 45px; }
.hLineNum { width: 40px; background: #ccc; border-right: 1px solid #ccc; text-align: right; pointer-events: none; }
.stage { display: grid; place-items: center; }
.hidden { display: none; }
</style>
<div class="papa">
<p>如果想突破多叶草的叶数限制，请使用 @shape() 函数。以下是该函数的演示，可以修改红色数字后查看运行效果，请注意观察偶数与奇数的区别：</p>
<div class="mama">
<pre class="hCode" contenteditable="true"><css-doodle click-to-update>
@grid: 2 / 400px;
background: @p(green,darkgreen,lightgreen);
clip-path: @shape(
points: 200;
r: cos(<span style="color:red">7</span>t);
);
</css-doodle></pre>
<pre class="hLineNum"></pre>
</div>
<p><button class="btnok" type="button" value="运行代码">运行代码</button></p>
<div class="stage"></div>
<p>同样的，本例的 @shape() 函数也支持浮点数。</p>
</div>
<script>
let btns = document.querySelectorAll('.btnok'),
stages = document.querySelectorAll('.stage'),
hCodes = document.querySelectorAll('.hCode'),
hLineNums = document.querySelectorAll('.hLineNum'),
mamas = document.querySelectorAll('.mama');
btns.forEach((item,key) => {
let lines = hCodes.innerText.trim().split('\n').length;
let str = '';
for(i = 0; i < lines; i ++) {
str += i + 1 + '\n';
}
hLineNums.innerText = str;
mamas.style.cssText += `height: ${hCodes.offsetHeight + 10}px`;
item.onclick = () => {
let val = item.value;
stages.innerHTML = val === '运行代码' ? hCodes.innerText : '';
item.value = item.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
}
});
</script>
棒棒哒！{:4_204:} 好奇妙，明明多叶草只支持整数，但是用浮点数赋值时居然接受小数了。{:4_204:} 马黑黑 发表于 2023-6-6 08:05
.papa > p { margin: 10px 0; }
.mama { margin-left: 40px; position: relative; }
.hCode, .hLineNum ...
这个也很奇怪，奇数时得到了这个数字的叶瓣，偶数时得到的是双倍的叶瓣。{:4_203:} 来看看意外发现，感谢老师！{:4_190:} 我来这里点一会儿玩一下{:4_173:} 需要好多花的时候就可以用。。 南无月 发表于 2023-6-6 22:07
我来这里点一会儿玩一下
好玩多玩 红影 发表于 2023-6-6 10:06
好奇妙，明明多叶草只支持整数，但是用浮点数赋值时居然接受小数了。
袁川是用 clip-path 切割出各种形状吧，算法里考虑了兼容问题 南无月 发表于 2023-6-6 22:08
需要好多花的时候就可以用。。
可以可以 红影 发表于 2023-6-6 10:08
这个也很奇怪，奇数时得到了这个数字的叶瓣，偶数时得到的是双倍的叶瓣。
是的，所以我提示注意观察 梦缘 发表于 2023-6-6 11:07
来看看意外发现，感谢老师！
{:4_190:} 醉美水芙蓉 发表于 2023-6-6 11:43
老师又有新作品啦！
{:4_190:} 马黑黑 发表于 2023-6-6 22:10
袁川是用 clip-path 切割出各种形状吧，算法里考虑了兼容问题
黑黑的发现在别处看不到呢，厉害{:4_199:} 马黑黑 发表于 2023-6-6 22:11
是的，所以我提示注意观察
这个是什么原理呢？ 红影 发表于 2023-6-6 23:14
这个是什么原理呢？
具体我也说不上来 红影 发表于 2023-6-6 23:14
黑黑的发现在别处看不到呢，厉害
也是偶然发现的