烟花放在指定位置(答小辣椒）

马黑黑

以电子梦幻帖子为例，只需修改两处地方，一处是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>

马黑黑

@小辣椒

小辣椒

谢谢黑黑，手机看看，晚上去练习做。

红影

这样限制了画布的大小和位置，就可以限制上面画作出现的地方了吧。

加林森

学习学习。

马黑黑

红影 发表于 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
谢谢黑黑，说这么仔细，小辣椒现成的图图加个效果进去

小辣椒

黑黑我今天上来了找找你有没有视频嵌入式的教程，就是一个图片镂空。里面一个视频出来，看见老头特别喜欢这种视频制作。主要他图图漂亮，但发现视频不能自己缩放，有时候视频会不能看全，我想学习做一个视频尺寸可以按自己要求移动位置，缩放大小的，记得你有个帖是归纳各种制作方法的。

小辣椒

黑黑你太厉害了，发了这么多教程，绝大部分我都没有看过，记得上次那个帖应该是精华帖，再继续找

马黑黑

小辣椒 发表于 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
做过说明你懂的了

不一样的效果