烟花放在指定位置(答小辣椒）
本帖最后由 马黑黑 于 2022-8-12 07:57 编辑以电子梦幻帖子为例，只需修改两处地方，一处是CSS，一处是JS。修改后烟花就不占满整个帖子。但这里的修改没有考虑画布边缘问题，邻近边缘的烟花会是不完整的：
<style>
#papa { margin: auto; width: 1024px; height: 640px; background: #000 url('https://638183.freep.cn/638183/Pic/81/818.png') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#canv { position: absolute; left: 400px; top: 10px; } /* 画布定位的语句 */
#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#tit { position: absolute; left: 60px; top: 10px;font: bold 22px / 40px sans-serif; color: snow; text-shadow: 2px 2px 4px black; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<span id="tit">Electric Dreams</span>
<canvas id="canv"></canvas>
<span id="disc"></span>
</div>
<script>
(function() {
let ctx = canv.getContext('2d');
let w = canv.width = 500, h = canv.height = 300; // 自定义画布尺寸
let particles = [], idx = 0, aud = new Audio();
//后面的代码省略 // ....
</script>
@小辣椒 谢谢黑黑，手机看看，晚上去练习做。 这样限制了画布的大小和位置，就可以限制上面画作出现的地方了吧。{:4_187:} 学习学习。 红影 发表于 2022-8-12 11:16
这样限制了画布的大小和位置，就可以限制上面画作出现的地方了吧。
是的
小辣椒 发表于 2022-8-12 09:47
谢谢黑黑，手机看看，晚上去练习做。
其实方法很多的。比如你习惯的HTML方法：
<canvas id="canv" width="300" height="300" style="position: absolute; left: 100px; top: 80px;"></canvas>
当然，还需要修改一下JS代码，就是 w 和 h 两个变量：
let w = canv.width, h = canv.height; 加林森 发表于 2022-8-12 11:40
学习学习。
能消化就ok 马黑黑 发表于 2022-8-12 12:12
能消化就ok
好的。 马黑黑 发表于 2022-8-12 12:12
其实方法很多的。比如你习惯的HTML方法：
谢谢黑黑，说这么仔细，小辣椒现成的图图加个效果进去 小辣椒 发表于 2022-8-12 13:17
谢谢黑黑，说这么仔细，小辣椒现成的图图加个效果进去
{:4_190:} 黑黑我今天上来了找找你有没有视频嵌入式的教程，就是一个图片镂空。里面一个视频出来，看见老头特别喜欢这种视频制作。主要他图图漂亮，但发现视频不能自己缩放，有时候视频会不能看全，我想学习做一个视频尺寸可以按自己要求移动位置，缩放大小的，记得你有个帖是归纳各种制作方法的。 黑黑你太厉害了，发了这么多教程，绝大部分我都没有看过，记得上次那个帖应该是精华帖，再继续找{:4_187:} 小辣椒 发表于 2022-8-14 10:32
黑黑我今天上来了找找你有没有视频嵌入式的教程，就是一个图片镂空。里面一个视频出来，看见老头特别喜欢这 ...
这个有吧 小辣椒 发表于 2022-8-14 10:43
黑黑你太厉害了，发了这么多教程，绝大部分我都没有看过，记得上次那个帖应该是精华帖，再继续找
用论坛的查找功能找找可以容易一些 马黑黑 发表于 2022-8-14 11:14
用论坛的查找功能找找可以容易一些
我查了精华帖没有找到 小辣椒 发表于 2022-8-14 11:15
我查了精华帖没有找到
有些不一定是精华，有些可能是在帖子后解释。
你可以考虑看我的做帖的那个复习类教程，你看过的，我写到了视频的，只是不记得发了木有 马黑黑 发表于 2022-8-14 11:17
有些不一定是精华，有些可能是在帖子后解释。
你可以考虑看我的做帖的那个复习类教程，你看过的，我写 ...
视频类我看了几个，没有直接嵌入画面里面的，有视频出来加歌词之类，我也是有做过 小辣椒 发表于 2022-8-14 11:21
视频类我看了几个，没有直接嵌入画面里面的，有视频出来加歌词之类，我也是有做过
做过说明你懂的了 马黑黑 发表于 2022-8-14 11:40
做过说明你懂的了
不一样的效果
页:
[1]
2