canvas 跟随鼠标动态彩色粒子效果

最新推荐文章于 2024-08-19 13:02:20 发布

90年的罐头�

最新推荐文章于 2024-08-19 13:02:20 发布

阅读量690

点赞数 1

分类专栏： canvas 前端 js html

本文链接：https://blog.csdn.net/weixin_43978604/article/details/99680920

版权

本文介绍如何使用Konva.js库创建一个跟随鼠标的动态彩色粒子效果。通过在2π周期内利用正弦和余弦波形让粒子进行圆周运动，并在鼠标移动时绘制线条连接前后坐标，通过改变振幅产生视觉效果。同时，利用rgba颜色覆盖实现渐变效果。

摘要由CSDN通过智能技术生成

使用Konva.js 库实现

效果图

思路

在 2 PI 周期内 x y 分别做一定振幅的正弦余弦波形运动坐标点的轨迹形成的就是半径为振幅的圆利用这个特性来绘制粒子圆周运动效果

鼠标移动事件记录移动前后的坐标用绘制线条来连接

粒子做圆周运动的半径就是振幅通过动态改变振幅可形成意想不到的效果

渐变的效果需要用到不清除画布用rgba 覆盖每一次绘制

js

<script>
    var width = window.innerWidth , height = window.innerHeight , radius = 2 , t = 0, num =20;
    // 鼠标坐标    
    mouse = {
            x0: width/2, // 鼠标上一次坐标
            y0: height/2,
            x:width/2, // 鼠标当前坐标
            y:width/2
        }
    var stage = new Konva.Stage({