论坛 › 西藏 › web前端---canvas绚丽烟花特效

b1gc8v 发表于 2024-6-30 04:44:42

web前端---canvas绚丽烟花特效

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 我裁一段星河送给你，好叫你不逊色这漫天烟火</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">漫天的烟火，在这璀璨的星空中闪耀，成就了这片星空的绚丽，更散发出了自己<span style="color: black;">没</span>限的光芒，今天就<span style="color: black;">运用</span>canvas来做一个烟花效果吧！✨</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">实现效果</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/v2-bddf474c1cc3f576bd03d1cadb5dfe64_b.jpg" style="width: 50%; margin-bottom: 20px;"></div>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">实现的效果还是很不错的，漫天的烟火肆意绽放</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">实现过程</h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">1. 简单的 Html 和 CSS</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">简单的写点<span style="color: black;">基本</span>样式，背景黑色，定义个canvas标签</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;!DOCTYPE html&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">html</span> <span style="color: black;">lang</span><span style="color: black;">=</span><span style="color: black;">"en"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"UTF-8"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">http-equiv</span><span style="color: black;">=</span><span style="color: black;">"X-UA-Compatible"</span> <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"IE=edge"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">name</span><span style="color: black;">=</span><span style="color: black;">"viewport"</span> <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"width=device-width, initial-scale=1.0"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">title</span><span style="color: black;">&gt;&lt;/</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">*</span> <span style="color: black;">{</span>
      <span style="color: black;">margin</span><span style="color: black;">:</span> <span style="color: black;">0</span><span style="color: black;">;</span>
      <span style="color: black;">padding</span><span style="color: black;">:</span> <span style="color: black;">0</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
      <span style="color: black;">body</span> <span style="color: black;">{</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">black</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
      <span style="color: black;">canvas</span> <span style="color: black;">{</span>
      <span style="color: black;">position</span><span style="color: black;">:</span> <span style="color: black;">absolute</span><span style="color: black;">;</span>
      <span style="color: black;">z-index</span><span style="color: black;">:</span> <span style="color: black;">0</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">canvas</span><span style="color: black;">&gt;</span>您的浏览器不支持<span style="color: black;">&lt;/</span><span style="color: black;">canvas</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">script</span> <span style="color: black;">src</span><span style="color: black;">=</span><span style="color: black;">"index.js"</span><span style="color: black;">&gt;&lt;/</span><span style="color: black;">script</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">html</span><span style="color: black;">&gt;</span>
    </div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">2. 创建 canvas画布</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在js中先获取标签，设置画布<span style="color: black;">体积</span>，采用resize监听页面的<span style="color: black;">调节</span>，<span style="color: black;">即时</span>的改变画布的<span style="color: black;">体积</span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">// 元素获取
      </span><span style="color: black;">const</span> <span style="color: black;">canvas</span> <span style="color: black;">=</span> <span style="color: black;">document</span><span style="color: black;">.</span><span style="color: black;">querySelector</span><span style="color: black;">(</span><span style="color: black;">"canvas"</span><span style="color: black;">)</span>
      <span style="color: black;">const</span> <span style="color: black;">ctx</span> <span style="color: black;">=</span> <span style="color: black;">canvas</span><span style="color: black;">.</span><span style="color: black;">getContext</span><span style="color: black;">(</span><span style="color: black;">"2d"</span><span style="color: black;">);</span>
      <span style="color: black;">// 设定画布<span style="color: black;">体积</span>
      </span><span style="color: black;">function</span> <span style="color: black;">resizeCanvas</span><span style="color: black;">()</span> <span style="color: black;">{</span>
      <span style="color: black;">canvas</span><span style="color: black;">.</span><span style="color: black;">width</span> <span style="color: black;">=</span> <span style="color: black;">window</span><span style="color: black;">.</span><span style="color: black;">innerWidth</span>
      <span style="color: black;">canvas</span><span style="color: black;">.</span><span style="color: black;">height</span> <span style="color: black;">=</span> <span style="color: black;">window</span><span style="color: black;">.</span><span style="color: black;">innerHeight</span>
      <span style="color: black;">}</span>
      <span style="color: black;">resizeCanvas</span><span style="color: black;">();</span>
      <span style="color: black;">// 页面缩放改变画布<span style="color: black;">体积</span>
      </span><span style="color: black;">window</span><span style="color: black;">.</span><span style="color: black;">addEventListener</span><span style="color: black;">(</span><span style="color: black;">"resize"</span><span style="color: black;">,</span> <span style="color: black;">resizeCanvas</span><span style="color: black;">)</span>
    </div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">3. 获取鼠标点击位置</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span>e.clientX和e.clientY来获取鼠标点击的位置，用于在后面实<span style="color: black;">此刻</span>鼠标点击的位置，产生烟花</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">function</span> <span style="color: black;">clickSite</span><span style="color: black;">(</span><span style="color: black;">e</span><span style="color: black;">)</span> <span style="color: black;">{</span>
      <span style="color: black;">// 获取当前鼠标的坐标
      </span> <span style="color: black;">let</span> <span style="color: black;">x</span> <span style="color: black;">=</span> <span style="color: black;">e</span><span style="color: black;">.</span><span style="color: black;">clientX</span><span style="color: black;">;</span>
      <span style="color: black;">let</span> <span style="color: black;">y</span> <span style="color: black;">=</span> <span style="color: black;">e</span><span style="color: black;">.</span><span style="color: black;">clientY</span><span style="color: black;">;</span>
      <span style="color: black;">// 绘制
      </span> <span style="color: black;">addFires</span><span style="color: black;">(</span><span style="color: black;">x</span><span style="color: black;">,</span> <span style="color: black;">y</span><span style="color: black;">);</span>
      <span style="color: black;">}</span>
      <span style="color: black;">document</span><span style="color: black;">.</span><span style="color: black;">addEventListener</span><span style="color: black;">(</span><span style="color: black;">click</span><span style="color: black;">,</span> <span style="color: black;">clickSite</span><span style="color: black;">);</span>
    </div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">4. 实现鼠标点击产生烟花的初级形态</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">我们<span style="color: black;">循序渐进</span>来实现，这是实现烟花效果的<span style="color: black;">第1</span>步，<span style="color: black;">经过</span>在点击位置添加一个烟花雏形</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">，这是一个单纯的静态，在后面<span style="color: black;">咱们</span>慢慢的让它动起来</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">function</span> <span style="color: black;">drawFires</span><span style="color: black;">()</span> <span style="color: black;">{</span>
      <span style="color: black;">// 初始半径，以及粒子数量
      </span> <span style="color: black;">let</span> <span style="color: black;">count</span> <span style="color: black;">=</span> <span style="color: black;">10</span><span style="color: black;">;</span>
      <span style="color: black;">let</span> <span style="color: black;">radius</span> <span style="color: black;">=</span> <span style="color: black;">10</span><span style="color: black;">;</span>
      <span style="color: black;">for</span> <span style="color: black;">(</span><span style="color: black;">let</span> <span style="color: black;">i</span> <span style="color: black;">=</span> <span style="color: black;">0</span><span style="color: black;">;</span> <span style="color: black;">i</span> <span style="color: black;">&lt;</span> <span style="color: black;">count</span><span style="color: black;">;</span> <span style="color: black;">i</span><span style="color: black;">++</span><span style="color: black;">)</span> <span style="color: black;">{</span>
      <span style="color: black;">// 渲染出当前数据</span> <span style="color: black;">// 下面是点数学题
      </span> <span style="color: black;">// moveX，moveY是粒子<span style="color: black;">起始</span>的坐标，画个三角形，<span style="color: black;">方向</span>半径<span style="color: black;">晓得</span>很容易就得出方程
      </span> <span style="color: black;">let</span> <span style="color: black;">angle</span> <span style="color: black;">=</span> <span style="color: black;">360</span> <span style="color: black;">/</span> <span style="color: black;">coun</span>
    </div>

星☆雨 发表于 2024-8-29 22:31:53

认真阅读了楼主的帖子，非常有益。

m5k1umn 发表于 2024-9-26 09:38:20

我深受你的启发，你的话语是我前进的动力。

查看完整版本: web前端---canvas绚丽烟花特效