Floverdance

马黑黑

马黑黑

帖子代码

<style>
	#mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/webp2/flover.webp') no-repeat center/cover; box-shadow: 4px 4px 8px gray; overflow: hidden; z-index: 1; position: relative; --state: running; }
	#msvg { position: absolute; left: calc(50% - 100px); top: 40px; cursor: pointer; transition: .6s; animation: rot 8s linear infinite var(--state); }
	#msvg:hover { filter: invert(100%) drop-shadow(0 0 60px white); }
	#vid { position: absolute; top: -35%; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
	#fsbtn { position: absolute; left: 48%; bottom: 20px; color: snow; background: #333333ac; padding: 4px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
	@keyframes rot { to { transform: rotate(-360deg); } }
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=509531501" autoplay loop></audio>
	<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/30/45/62bac706237f8.mp4" autoplay loop muted></video>
	<svg id="msvg" width="200" height="200" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg">
	<span id="fsbtn"></span>
</div>
 
<script  type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';

var dr = draw.dr('msvg');
//var dr = _dr('msvg'); //酱紫也可以

var total = 12;
for(var i = 0; i < total; i ++) {
	var deg = 360 / total * i, color = '#' + Math.random().toString(16).substring(2,8) + 'ec';
	dr.polygon('0 -80, -10 -60, 0 0, 10 -60', color).transform(`rotate(${deg}) translate(0 -6)`);
}
dr.circle(0, 0, 6, 'yellow');

msvg.onclick = () => {
	msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
	aud.paused ? (aud.play(), vid.play()) : (aud.pause(), vid.pause());
};

aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
fscreen.fs('mydiv', 'fsbtn');
</script>

马黑黑

本帖配合 svgdr教程·画多边形 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! 做演示

梦江南

老师早上好！我来听老师讲代码。

红影

如此绚丽多彩的背景，配合这样随机色的多边形小播，真漂亮

红影

小播鼠标触碰还有滤镜和阴影变化呢，中间还给它加了个黄色圆点，更漂亮了

红影

黑黑的每节课程不但有详细讲解，还有实例，太赞了

马黑黑

红影 发表于 2024-11-4 10:06
黑黑的每节课程不但有详细讲解，还有实例，太赞了

感谢支持

马黑黑

梦江南 发表于 2024-11-4 08:58
老师早上好！我来听老师讲代码。

马黑黑

红影 发表于 2024-11-4 10:04
小播鼠标触碰还有滤镜和阴影变化呢，中间还给它加了个黄色圆点，更漂亮了

马黑黑

红影 发表于 2024-11-4 09:59
如此绚丽多彩的背景，配合这样随机色的多边形小播，真漂亮

红影

马黑黑 发表于 2024-11-4 12:01
感谢支持

才发现引用js的方式和以前不一样了呢，不使用var sc也不用appendChild(sc)了，直接import draw from 就引过来了，sc.onload = () =>也不用了，直接就用，太方便了

红影

马黑黑 发表于 2024-11-4 12:03

不知道以前的js是不是都能这样用

红影

马黑黑 发表于 2024-11-4 12:03

好像也不用dr.g('g1').addTo('defs');添加分组了，感觉这个帖子特别直接方便呢。
var dr = draw.dr('msvg');
//var dr = _dr('msvg'); //酱紫也可以 而且这两个写法也都行。

马黑黑

红影 发表于 2024-11-4 18:08
好像也不用dr.g('g1').addTo('defs');添加分组了，感觉这个帖子特别直接方便呢。
var dr = draw.dr('msv ...

分组与否是看情况而定。像这个帖子，它就是在svg画布上画一个由多边形组成的图案，外加一个小圆，结构上比较简单，无需分组。分组更多的时候是为了引用或为了好管理。

红影

马黑黑 发表于 2024-11-4 19:13
分组与否是看情况而定。像这个帖子，它就是在svg画布上画一个由多边形组成的图案，外加一个小圆，结构上 ...

虽然分组有好处，但简约的代码看着更清晰

马黑黑

红影 发表于 2024-11-4 18:04
不知道以前的js是不是都能这样用

不一定都行。这要额外加工过。插件的 export 导出，需要另外做一个封装。svgdr.js 以插件形式开发，它不能直接 export（导出）和被 import（导入），而是在插件的基础上再做一个输出函数，这个函数非常简短，如果是用箭头函数的话也就一句代码，然后再使用 export 模块导出该函数，这个函数就可以被 import 了。

如果你注意观察，引用插件的地址是不同的，前面的引用在论坛需要 createElement 方法，它的地址指向的js插件是不能被 import的；这一帖则使用了一个新的地址，插件做了 export 封装。

马黑黑

红影 发表于 2024-11-4 19:17
虽然分组有好处，但简约的代码看着更清晰

一切看情况，能不分组就不分，不分组做不好就分。

马黑黑

红影 发表于 2024-11-4 18:04
才发现引用js的方式和以前不一样了呢，不使用var sc也不用appendChild(sc)了，直接import draw from 就引 ...

前提是浏览器要支持ES6，不过绝大多数现代浏览器都完美支持

小辣椒

黑黑太勤奋了，每天精彩不断，分享不停，太厉害了