Canvas粒子波浪动画效果 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! Archiver

论坛 › 马黑黑教程专版 › Canvas粒子波浪动画效果

马黑黑 发表于 2024-4-28 12:54

Canvas粒子波浪动画效果

<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<div class='mum'>
<cl-cd data-idx="1"><!doctype html></cl-cd>
<cl-cd data-idx="2"><<span class="tDarkRed">html</span>></cl-cd>
<cl-cd data-idx="3"><<span class="tDarkRed">head</span>></cl-cd>
<cl-cd data-idx="4"> <<span class="tDarkRed">meta</span> charset=<span class="tMagenta">"utf-8"</span>></cl-cd>
<cl-cd data-idx="5"> <<span class="tDarkRed">title</span>>Canvas粒子波浪动画效果<<span class="tDarkRed">/title</span>></cl-cd>
<cl-cd data-idx="6"> <<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="7"> * { <span class="tBlue">margin:</span> 0; <span class="tBlue">padding:</span> 0; }</cl-cd>
<cl-cd data-idx="8"> canvas { <span class="tBlue">display:</span> block; }</cl-cd>
<cl-cd data-idx="9"> <<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="10"><<span class="tDarkRed">/head</span>></cl-cd>
<cl-cd data-idx="11"><<span class="tDarkRed">body</span>></cl-cd>
<cl-cd data-idx="12"> </cl-cd>
<cl-cd data-idx="13"><<span class="tDarkRed">canvas</span>><<span class="tDarkRed">/canvas</span>></cl-cd>
<cl-cd data-idx="14"> </cl-cd>
<cl-cd data-idx="15"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="16">    <span class="tBlue">var</span> canvas = <span class="tRed">document</span>.body.querySelector(<span class="tMagenta">'canvas'</span>),</cl-cd>
<cl-cd data-idx="17">        ctx = canvas.getContext(<span class="tMagenta">'2d'</span>),</cl-cd>
<cl-cd data-idx="18">        W = canvas.width = <span class="tRed">window</span>.innerWidth,</cl-cd>
<cl-cd data-idx="19">        H = canvas.height = <span class="tRed">window</span>.innerHeight,</cl-cd>
<cl-cd data-idx="20">        pixels = [];</cl-cd>
<cl-cd data-idx="21"> </cl-cd>
<cl-cd data-idx="22">    <span class="tBlue">for</span> (<span class="tBlue">var</span> x = -400; x < 400; x += 5) {</cl-cd>
<cl-cd data-idx="23">        <span class="tBlue">for</span> (<span class="tBlue">var</span> z = -250; z < 250; z += 5) {</cl-cd>
<cl-cd data-idx="24">            pixels.push({ <span class="tBlue">x:</span> x, <span class="tBlue">y:</span> 100, <span class="tBlue">z:</span> z });</cl-cd>
<cl-cd data-idx="25">        }</cl-cd>
<cl-cd data-idx="26">    }</cl-cd>
<cl-cd data-idx="27"> </cl-cd>
<cl-cd data-idx="28">    <span class="tBlue">function</span> render(ts) {</cl-cd>
<cl-cd data-idx="29">        <span class="tBlue">var</span> imageData = ctx.getImageData(0, 0, W, H),</cl-cd>
<cl-cd data-idx="30">            len = pixels.length,</cl-cd>
<cl-cd data-idx="31">            fov = 250,</cl-cd>
<cl-cd data-idx="32">            pixel, scale,</cl-cd>
<cl-cd data-idx="33">            x2d, y2d, c;</cl-cd>
<cl-cd data-idx="34"> </cl-cd>
<cl-cd data-idx="35">        <span class="tBlue">for</span> (<span class="tBlue">var</span> i = 0; i < len; i++) {</cl-cd>
<cl-cd data-idx="36">            pixel = pixels;</cl-cd>
<cl-cd data-idx="37">            scale = fov / (fov + pixel.z);</cl-cd>
<cl-cd data-idx="38">            x2d = pixel.x * scale + W / 2;</cl-cd>
<cl-cd data-idx="39">            y2d = pixel.y * scale + H / 2;</cl-cd>
<cl-cd data-idx="40">            <span class="tBlue">if</span> (x2d >= 0 && x2d <= W && y2d >= 0 && y2d <= H) {</cl-cd>
<cl-cd data-idx="41">                c = (<span class="tRed">Math</span>.round(y2d) * imageData.width + <span class="tRed">Math</span>.round(x2d)) * 4;</cl-cd>
<cl-cd data-idx="42">                imageData.data = 17;</cl-cd>
<cl-cd data-idx="43">                imageData.data = 122;</cl-cd>
<cl-cd data-idx="44">                imageData.data = 181;</cl-cd>
<cl-cd data-idx="45">                imageData.data = 255;</cl-cd>
<cl-cd data-idx="46">            }</cl-cd>
<cl-cd data-idx="47">            pixel.z -= 0.4;</cl-cd>
<cl-cd data-idx="48">            pixel.y = H / 14 + <span class="tRed">Math</span>.sin(i / len * 15 + (ts / 450)) * 10;</cl-cd>
<cl-cd data-idx="49">            <span class="tBlue">if</span> (pixel.z < -fov) pixel.z += 2 * fov;</cl-cd>
<cl-cd data-idx="50">        }</cl-cd>
<cl-cd data-idx="51">        ctx.putImageData(imageData, 0, 0);</cl-cd>
<cl-cd data-idx="52">    }</cl-cd>
<cl-cd data-idx="53"> </cl-cd>
<cl-cd data-idx="54">    (<span class="tBlue">function</span> drawFrame(ts) {</cl-cd>
<cl-cd data-idx="55">        requestAnimationFrame(drawFrame, canvas);</cl-cd>
<cl-cd data-idx="56">        ctx.fillStyle = <span class="tMagenta">'#17293a'</span>;</cl-cd>
<cl-cd data-idx="57">        ctx.fillRect(0, 0, W, H);</cl-cd>
<cl-cd data-idx="58">        render(ts);</cl-cd>
<cl-cd data-idx="59">    }());</cl-cd>
<cl-cd data-idx="60"><<span class="tDarkRed">/script</span>></cl-cd>
<cl-cd data-idx="61"> </cl-cd>
<cl-cd data-idx="62"><<span class="tDarkRed">/body</span>></cl-cd>
<cl-cd data-idx="63"><<span class="tDarkRed">/html</span>></cl-cd>
</div>

马黑黑 发表于 2024-4-28 12:57

将一楼代码存为本地 .html 文档然后运行，或将 13~60 行的代码复制到 http://mhh.52qingyin.cn/api/pcode/ 直接运行，均可查看动画效果。

小辣椒 发表于 2024-4-28 14:06

这个粒子太美了{:4_199:}

幸运草 发表于 2024-4-28 17:33

那个波浪不系动图吖，代码的呐{:6_244:}

南无月 发表于 2024-4-28 18:08

这背景色和粒子色搭的简直是绝了。。好高级。。{:4_199:}

南无月 发表于 2024-4-28 18:13

imageData.data = 17;
            imageData.data = 122;
            imageData.data = 181;
            imageData.data = 255;

这一串是改粒子颜色的？跟大白兔那贴有点像。。
这个粒子颜色为啥要整这么复杂。。{:4_170:}

南无月 发表于 2024-4-28 18:22

前三个对应红绿蓝三原色。。
把RGB颜色对照表里三个数字对应抄上去就好了。。
最后一个数字也可以改动，会有不同程度影响。
{:4_199:}
这里可以组合出无穷无尽的颜色。。
可以搭不同色调的贴子。。

红影发表于 2024-4-28 19:31

这个粒子效果好美啊，只是代码看着挺复杂{:4_173:}

红影发表于 2024-4-28 19:32

把ctx.fillStyle = '#17293a';的颜色换了一下，又是不同的感觉了呢{:4_173:}

红影发表于 2024-4-28 19:44

去看了效果，改动一些数值效果就跟着变了呢{:4_204:}

马黑黑 发表于 2024-5-1 12:40

红影发表于 2024-4-28 19:44
去看了效果，改动一些数值效果就跟着变了呢

这是自然

红影发表于 2024-5-1 13:33

马黑黑发表于 2024-5-1 12:40
这是自然

这个很漂亮呢{:4_187:}

马黑黑 发表于 2024-5-1 16:51

红影发表于 2024-5-1 13:33
这个很漂亮呢

{:4_190:}

红影发表于 2024-5-2 15:05

马黑黑发表于 2024-5-1 16:51

这波浪好像还带着峰值呢。

马黑黑 发表于 2024-5-2 21:26

红影发表于 2024-5-2 15:05
这波浪好像还带着峰值呢。

是滴

红影发表于 2024-5-3 09:25

马黑黑发表于 2024-5-2 21:26
是滴

我去动一下计算公式，变化也很大，好像就现在这个配置最好看{:4_187:}

马黑黑 发表于 2024-5-3 10:21

红影发表于 2024-5-3 09:25
我去动一下计算公式，变化也很大，好像就现在这个配置最好看

一切看场景

红影发表于 2024-5-3 14:28

马黑黑发表于 2024-5-3 10:21
一切看场景

也是，也许不同场景下，也有觉得别的好看。

马黑黑 发表于 2024-5-3 16:31

红影发表于 2024-5-3 14:28
也是，也许不同场景下，也有觉得别的好看。

是的

红影发表于 2024-5-4 00:06

马黑黑发表于 2024-5-3 16:31
是的

不管怎么说，这个效果都很神奇。

页: [1] 2

查看完整版本: Canvas粒子波浪动画效果