文档章节

HTML5 Canvas很酷炫的粉尘态粒子引力效应

 前端彭于晏
发布于 2019/03/09 20:24
字数 787
阅读 5
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

分享个 Canvas粉尘态粒子引力效应
主要特点:
鼠标移动会被依附追随
鼠标点击会被弹开
鼠标拖动会以一定的范围弹开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Canvas粉尘态粒子引力效应</title>

    <style type="text/css">
        * {
        margin: 0;
        padding: 0;
        }
        html {
        overflow: hidden;
        }
        canvas {
        cursor: none;
        }
    </style>
</head>
<body>
    <canvas id=canvas></canvas>

    <!--move mouse or click -->

    <script type="text/javascript">
    window.onload = function() {

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        var pi = Math.PI;

        var centerX, centerY;
        var part_num = 2000; //粒子数量

        var mousedown = false;
        var X, Y;  //鼠标坐标

        var P = [];
        var part = function(x, y, vx, vy, r, red, green, blue, alpha, col) {
      this.x = x;
      this.y = y;
      this.vx = vx; //初始向左移动
      this.vy = vy; //初始向右移动
      this.r = r;  //大小
      this.red = red;
      this.green = green;
      this.blue = blue;
      this.alpha = alpha;
      this.col = col;
    };

    window.onmousemove = function(e) {
        X = e.clientX;
        Y = e.clientY;
    }

    window.onmousedown = function() {
        mousedown = true;
    }

    window.onmouseup = function() {
        mousedown = false;
    }

    var mouseover = false;
    window.onmouseover = function() {
        mouseover = true;
    }

    window.onmouseout = function() {
        mouseover = false;
    }

    function rand(min, max) {
        return Math.random() * (max - min) + min;
    }

    function dist(dx, dy) {
        return Math.sqrt(dx * dx + dy * dy);
    }

    function size() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        centerX = canvas.width / 2;
        centerY = canvas.height / 2;
    }

    size();
    X = centerX;
    Y = centerY;

    function init() {
      var x, y, vx, vy, r, red, green, blue, alpha, col;
      for (var i = 0; i < part_num; i++) {
        x = rand(0, canvas.width);
        y = rand(0, canvas.height);
        vx = rand(-5, 5);
        vy = rand(-5, 5);
        r = rand(1, 10);
        red = Math.round(rand(150, 200));
        green = Math.round(rand(100, 255));
        blue = Math.round(rand(180, 255));
        alpha = 1;
        col = "rgba(" + red + "," + green + "," + blue + "," + alpha + ")";

        P.push(new part(x, y, vx, vy, r, red, green, blue, alpha, col));
      }
    }
    // 背景绘制
    function bg() {
        // 使用 fillStyle 属性来设置用于填充绘图的颜色
        ctx.fillStyle = "raba(25,25,30,1)";
        // 使用fillRect() 方法绘制“已填色”的矩形
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        //clearRect() 方法清空给定矩形内的指定像素
        // ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    //鼠标吸引
    function attract(p) {
        var dx = (p.x - X),
                dy = (p.y - Y),
                dist = Math.sqrt(dx * dx + dy * dy),  //返回距离(平方根)
                angle = Math.atan2(dy, dx);   //返回坐标(dx,dy)与 X轴之间的角度的弧度

        if(dist > 50 && dist < 500) {
            if(!mousedown) {
                p.vx -= (200 / (p.r * dist)) * Math.cos(angle);
                p.vy -= (200 / (p.r * dist)) * Math.sin(angle);
            } else if(mousedown) {
                p.vx += (300 / (p.r * dist)) * Math.cos(angle);
                p.vy += (300 / (p.r * dist)) * Math.sin(angle);
            }
        }
    }

    //粒子弹弹弹
    function bounce(b) {
        if(b.x < b.r) {
            b.x = b.y;
            b.vx *= -3;
        }
        if(b.x > canvas.width - b.r) {
            b.x = canvas.width - b.r;
            b.vx *= -3;
        }

        if(b.y - b.r < 0) {
            b.y = b.r;
            b.vy *= -3;
        }
        if(b.y > canvas.height - b.r) {
            b.y = canvas.height - b.r;
            b.vy *= -3;
        }
    }

    // 鼠标拖动
    function draw() {
        var p;
        for(var i = 0; i < P.length; i++) {
            p = P[i];

            if(mouseover) attract(p);
            bounce(p);

            p.x += p.vx;
            p.y += p.vy;

            p.vx *= .975;
            p.vy *= .975;

            ctx.fillStyle = p.col;
            ctx.fillRect(p.x, p.y, p.r, p.r);
        }
        ctx.strokeStyle = (!mousedown) ? "rgba(0,0,0,,1)" : "rgba(255,0,0,1)";

        ctx.beginPath();
        ctx.moveTo(X, Y - 10);
        ctx.lineTo(X, Y + 10);
        ctx.moveTo(X - 10, Y);
        ctx.lineTo(X + 10, Y);
        ctx.stroke();
    }

    function loop() {
        bg();
        draw();
        window.requestAnimationFrame(loop);
    }
    // 事件
    window.onresize = size;

        // 初始化
        init();
    loop();

    }
    </script>

</body>
</html>

“我自己是一名从事了5年前端的老程序员,辞职目前在做讲师,今年年初我花了一个月整理了一份最适合2019年学习的web前端干货,从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理,送给每一位前端小伙伴,这里是小白聚集地,欢迎初学和进阶中的小伙伴。"

加QQ群:645199623(招募中)
加微❤:QD_666_QD
 

© 著作权归作者所有

粉丝 0
博文 101
码字总数 193622
作品 0
长沙
私信 提问
前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内附有时钟效果代码 ...

我的卡
2018/12/24
247
0
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
509
0
12个炫酷实用的HTML5带发光动画

在网页设计中,很多元素都可以实现发光的动画效果,比如输入框、文字、进度条等等。这些简单的元素加上炫酷的发光动画就会让整个页面戴上一层绚丽的色彩。今天我们就要为大家分享12款炫酷实用...

fishzhang8
2017/09/25
6
0
程序猿必备的10款web前端动画插件十三

  1.jQuery圆形旋转切换菜单 带菜单项描述   jQuery有着无数的插件,菜单插件是jQuery插件中最多的,尤其是CSS3和HTML5的配合,让jQuery菜单变得更加丰富多彩。今天我们要给大家分享一款...

爱码农
2018/08/30
0
0
16 个印象深刻的 HTML5/CSS3/JavaScript 体验

如果你是一个 Canvas、WebGL 和交互式 CSS3, HTML5 以及 Javascript 的粉丝,那你可能会听说来自瑞典的 Web 开发者 Hakim. Hakim 非常擅长 Web 动画和交互,他有很多关于 HTML5、CSS3 和 Ja...

红薯
2012/04/25
7.1K
6

没有更多内容

加载失败,请刷新页面

加载更多

dynamic-connectivity 动态连通性问题之 quick-union 算法

quick-union 的思想是:若对象 p 的 root_id 和对象 q 的 root_id 相等,则认为 p 和 q 连通。 若要将对象 p 和对象 q 连通(已知两对象未连通),则将 p 的 root_id 的值设为 q 的 root_id ...

Phpythoner_Alei
今天
33
0
OSChina 周六乱弹 —— 实在选不出来就唱国歌

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享阿冗的单曲《你的答案》。--祝大家在2020年都找到自己答案。 《你的答案》- 阿冗 手机党少年们想听歌,请使劲...

小小编辑
今天
10
0
Maven打包可执行Jar包的方法

在使用Java开发中,会使用到将工程打包成可执行的jar包的情况,那么在maven中怎么将项目中的依赖包都添加到jar中呢。在pom.xml中添加一下插件: <build><plugins><plugin><ar...

CapJes
今天
10
0
使用vue 开发地图类系统(openlayers.js)的注意。

使用vue 开发地图类系统的注意。 1、使用地图应该创建的对象 少使用 vue 的data 和计算属性(comments)存数据或是vuex。 为什么要要注意这个问题呢? 答:这个就要了解到vue的实现原理 。原理...

DY-Tao
昨天
7
0
web移动端学习:高德地图demo(一)

在高德地图开发中申请开发者资格,然后在控制台中新建应用,获得KEY; 新建模板HTML文件; <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>地图demo</title><scri......

dxiya
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部