canvas粒子线条插件使用

最新推荐文章于 2024-04-20 10:10:47 发布
最新推荐文章于 2024-04-20 10:10:47 发布
阅读量873 收藏 3
点赞数 1
分类专栏： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16494241/article/details/87861641
版权

canvas粒子线条插件使用

canvas粒子线条插件使用截图

demo：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>particlesJs test</title>
<style>
*{ margin:0; padding:0;}
</style>
</head>

<body style="background-color:#1146b8;">

<div id="particles-js"></div>

<script type="text/javascript" src="particlesJs.js"></script>

</body>
</html>

particlesJs.js代码：

function launchParticlesJS(e, i) {
    function a() {
        pJS.fn.canvasInit(), pJS.fn.canvasSize(), pJS.fn.canvasPaint(), pJS.fn.particlesCreate(), pJS.fn.particlesDraw()
    }
    function t() {
        pJS.fn.particlesDraw(), pJS.fn.requestAnimFrame = requestAnimFrame(t)
    }
    var n = document.querySelector("#" + e + " > canvas");
    if (pJS = {canvas: {el: n,w: n.offsetWidth,h: n.offsetHeight},particles: {color: "#fff",shape: "circle",opacity: 1,size: 2.5,size_random: !0,nb: 200,line_linked: {enable_auto: !0,distance: 100,color: "#fff",opacity: 1,width: 1,condensed_mode: {enable: !0,rotateX: 65e3,rotateY: 65e3}},anim: {enable: !0,speed: 1},array: []},interactivity: {enable: !0,mouse: {distance: 100},detect_on: "canvas",mode: "grab",line_linked: {opacity: 1},events: {onclick: {enable: !0,mode: "push",nb: 4}}},retina_detect: !1,fn: {vendors: {interactivity: {}}}}, i) {
        if (i.particles) {
            var c = i.particles;
            if (c.color && (pJS.particles.color = c.color), c.shape && (pJS.particles.shape = c.shape), c.opacity && (pJS.particles.opacity = c.opacity), c.size && (pJS.particles.size = c.size), 0 == c.size_random && (pJS.particles.size_random = c.size_random), c.nb && (pJS.particles.nb = c.nb), c.line_linked) {
                var s = c.line_linked;
                if (0 == s.enable_auto && (pJS.particles.line_linked.enable_auto = s.enable_auto), s.distance && (pJS.particles.line_linked.distance = s.distance), s.color && (pJS.particles.line_linked.color = s.color), s.opacity && (pJS.particles.line_linked.opacity = s.opacity), s.width && (pJS.particles.line_linked.width = s.width), s.condensed_mode) {
                    var r = s.condensed_mode;
                    0 == r.enable && (pJS.particles.line_linked.condensed_mode.enable = r.enable), r.rotateX && (pJS.particles.line_linked.condensed_mode.rotateX = r.rotateX), r.rotateY && (pJS.particles.line_linked.condensed_mode.rotateY = r.rotateY)
                }
            }
            if (c.anim) {
                var p = c.anim;
                0 == p.enable && (pJS.particles.anim.enable = p.enable), p.speed && (pJS.particles.anim.speed = p.speed)
            }
        }
        if (i.interactivity) {
            var o = i.interactivity;
            if (0 == o.enable && (pJS.interactivity.enable = o.enable), o.mouse && o.mouse.distance && (pJS.interactivity.mouse.distance = o.mouse.distance), o.detect_on && (pJS.interactivity.detect_on = o.detect_on), o.mode && (pJS.interactivity.mode = o.mode), o.line_linked && o.line_linked.opacity && (pJS.interactivity.line_linked.opacity = o.line_linked.opacity), o.events) {
                var l = o.events;
                if (l.onclick) {
                    var S = l.onclick;
                    0 == S.enable && (pJS.interactivity.events.onclick.enable = !1), "push" != S.mode && (pJS.interactivity.events.onclick.mode = S.mode), S.nb && (pJS.interactivity.events.onclick.nb = S.nb)
                }
            }
        }
        pJS.retina_detect = i.retina_detect
    }
    pJS.particles.color_rgb = hexToRgb(pJS.particles.color), pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color), pJS.retina_detect && window.devicePixelRatio > 1 && (pJS.retina = !0, pJS.canvas.w = 2 * pJS.canvas.el.offsetWidth, pJS.canvas.h = 2 * pJS.canvas.el.offsetHeight, pJS.particles.anim.speed = 2 * pJS.particles.anim.speed, pJS.particles.line_linked.distance = 2 * pJS.particles.line_linked.distance, pJS.particles.line_linked.width = 2 * pJS.particles.line_linked.width, pJS.interactivity.mouse.distance = 2 * pJS.interactivity.mouse.distance), pJS.fn.canvasInit = function() {
        pJS.canvas.ctx = pJS.canvas.el.getContext("2d")
    }, pJS.fn.canvasSize = function() {
        pJS.canvas.el.width = pJS.canvas.w, pJS.canvas.el.height = pJS.canvas.h, window.onresize = function() {
            pJS && (pJS.canvas.w = pJS.canvas.el.offsetWidth, pJS.canvas.h = pJS.canvas.el.offsetHeight, pJS.retina && (pJS.canvas.w *= 2, pJS.canvas.h *= 2), pJS.canvas.el.width = pJS.canvas.w, pJS.canvas.el.height = pJS.canvas.h, pJS.fn.canvasPaint(), pJS.particles.anim.enable || (pJS.fn.particlesRemove(), pJS.fn.canvasRemove(), a()))
        }
    }, pJS.fn.canvasPaint = function() {
        pJS.canvas.ctx.fillRect(0, 0, pJS.canvas.w, pJS.canvas.h)
    }, pJS.fn.canvasRemove = function() {
        pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h)
    }, pJS.fn.particle = function(e, i, a) {
        this.x = a ? a.x : Math.random() * pJS.canvas.w, this.y = a ? a.y : Math.random() * pJS.canvas.h, this.radius = (pJS.particles.size_random ? Math.random() : 1) * pJS.particles.size, pJS.retina && (this.radius *= 2), this.color = e, this.opacity = i, this.vx = -.5 + Math.random(), this.vy = -.5 + Math.random(), this.draw = function() {
            switch (pJS.canvas.ctx.fillStyle = "rgba(" + this.color.r + "," + this.color.g + "," + this.color.b + "," + this.opacity + ")", pJS.canvas.ctx.beginPath(), pJS.particles.shape) {
                case "circle":
                    pJS.canvas.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, !1);
                    break;
                case "edge":
                    pJS.canvas.ctx.rect(this.x, this.y, 2 * this.radius, 2 * this.radius);
                    break;
                case "triangle":
                    pJS.canvas.ctx.moveTo(this.x, this.y), pJS.canvas.ctx.lineTo(this.x + this.radius, this.y + 2 * this.radius), pJS.canvas.ctx.lineTo(this.x - this.radius, this.y + 2 * this.radius), pJS.canvas.ctx.closePath()
            }
            pJS.canvas.ctx.fill()
        }
    }, pJS.fn.particlesCreate = function() {
        for (var e = 0; e < pJS.particles.nb; e++)
            pJS.particles.array.push(new pJS.fn.particle(pJS.particles.color_rgb, pJS.particles.opacity))
    }, pJS.fn.particlesAnimate = function() {
        for (var e = 0; e < pJS.particles.array.length; e++) {
            var i = pJS.particles.array[e];
            i.x += i.vx * (pJS.particles.anim.speed / 2), i.y += i.vy * (pJS.particles.anim.speed / 2), i.x - i.radius > pJS.canvas.w ? i.x = i.radius : i.x + i.radius < 0 && (i.x = pJS.canvas.w + i.radius), i.y - i.radius > pJS.canvas.h ? i.y = i.radius : i.y + i.radius < 0 && (i.y = pJS.canvas.h + i.radius);
            for (var a = e + 1; a < pJS.particles.array.length; a++) {
                var t = pJS.particles.array[a];
                if (pJS.particles.line_linked.enable_auto && pJS.fn.vendors.distanceParticles(i, t), pJS.interactivity.enable)
                    switch (pJS.interactivity.mode) {
                        case "grab":
                            pJS.fn.vendors.interactivity.grabParticles(i, t)
                    }
            }
        }
    }, pJS.fn.particlesDraw = function() {
        pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h), pJS.fn.particlesAnimate();
        for (var e = 0; e < pJS.particles.array.length; e++) {
            var i = pJS.particles.array[e];
            i.draw("rgba(" + i.color.r + "," + i.color.g + "," + i.color.b + "," + i.opacity + ")")
        }
    }, pJS.fn.particlesRemove = function() {
        pJS.particles.array = []
    }, pJS.fn.vendors.distanceParticles = function(e, i) {
        var a = e.x - i.x, t = e.y - i.y, n = Math.sqrt(a * a + t * t);
        if (n <= pJS.particles.line_linked.distance) {
            var c = pJS.particles.line_linked.color_rgb_line;
            if (pJS.canvas.ctx.beginPath(), pJS.canvas.ctx.strokeStyle = "rgba(" + c.r + "," + c.g + "," + c.b + "," + (pJS.particles.line_linked.opacity - n / pJS.particles.line_linked.distance) + ")", pJS.canvas.ctx.moveTo(e.x, e.y), pJS.canvas.ctx.lineTo(i.x, i.y), pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width, pJS.canvas.ctx.stroke(), pJS.canvas.ctx.closePath(), pJS.particles.line_linked.condensed_mode.enable) {
                var a = e.x - i.x, t = e.y - i.y, s = a / (1e3 * pJS.particles.line_linked.condensed_mode.rotateX), r = t / (1e3 * pJS.particles.line_linked.condensed_mode.rotateY);
                i.vx += s, i.vy += r
            }
        }
    }, pJS.fn.vendors.interactivity.listeners = function() {
        if ("window" == pJS.interactivity.detect_on)
            var e = window;
        else
            var e = pJS.canvas.el;
        if (e.onmousemove = function(i) {
            if (e == window)
                var a = i.clientX, t = i.clientY;
            else
                var a = i.offsetX, t = i.offsetY;
            pJS && (pJS.interactivity.mouse.pos_x = a, pJS.interactivity.mouse.pos_y = t, pJS.retina && (pJS.interactivity.mouse.pos_x *= 2, pJS.interactivity.mouse.pos_y *= 2), pJS.interactivity.status = "mousemove")
        }, e.onmouseleave = function() {
            pJS && (pJS.interactivity.mouse.pos_x = 0, pJS.interactivity.mouse.pos_y = 0, pJS.interactivity.status = "mouseleave")
        }, pJS.interactivity.events.onclick.enable)
            switch (pJS.interactivity.events.onclick.mode) {
                case "push":
                    e.onclick = function() {
                        if (pJS)
                            for (var e = 0; e < pJS.interactivity.events.onclick.nb; e++)
                                pJS.particles.array.push(new pJS.fn.particle(pJS.particles.color_rgb, pJS.particles.opacity, {x: pJS.interactivity.mouse.pos_x,y: pJS.interactivity.mouse.pos_y}))
                    };
                    break;
                case "remove":
                    e.onclick = function() {
                        pJS.particles.array.splice(0, pJS.interactivity.events.onclick.nb)
                    }
            }
    }, pJS.fn.vendors.interactivity.grabParticles = function(e, i) {
        var a = e.x - i.x, t = e.y - i.y, n = Math.sqrt(a * a + t * t), c = e.x - pJS.interactivity.mouse.pos_x, s = e.y - pJS.interactivity.mouse.pos_y, r = Math.sqrt(c * c + s * s);
        if (n <= pJS.particles.line_linked.distance && r <= pJS.interactivity.mouse.distance && "mousemove" == pJS.interactivity.status) {
            var p = pJS.particles.line_linked.color_rgb_line;
            pJS.canvas.ctx.beginPath(), pJS.canvas.ctx.strokeStyle = "rgba(" + p.r + "," + p.g + "," + p.b + "," + (pJS.interactivity.line_linked.opacity - r / pJS.interactivity.mouse.distance) + ")", pJS.canvas.ctx.moveTo(e.x, e.y), pJS.canvas.ctx.lineTo(pJS.interactivity.mouse.pos_x, pJS.interactivity.mouse.pos_y), pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width, pJS.canvas.ctx.stroke(), pJS.canvas.ctx.closePath()
        }
    }, pJS.fn.vendors.destroy = function() {
        cancelAnimationFrame(pJS.fn.requestAnimFrame), n.remove(), delete pJS
    }, a(), pJS.particles.anim.enable && t(), pJS.interactivity.enable && pJS.fn.vendors.interactivity.listeners()
}
function hexToRgb(e) {
    var i = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    e = e.replace(i, function(e, i, a, t) {
        return i + i + a + a + t + t
    });
    var a = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
    return a ? {r: parseInt(a[1], 16),g: parseInt(a[2], 16),b: parseInt(a[3], 16)} : null
}
window.requestAnimFrame = function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(e) {
        window.setTimeout(e, 1e3 / 60)
    }
}(), window.cancelRequestAnimFrame = function() {
    return window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.oCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame || clearTimeout
}(), window.particlesJS = function(e, i) {
    "string" != typeof e && (i = e, e = "particles-js"), e || (e = "particles-js");
    var a = document.createElement("canvas");
    a.style.width = "100%", a.style.height = "100%";
    var t = document.getElementById(e).appendChild(a);
    null != t && launchParticlesJS(e, i)
};

window.particlesJS && particlesJS(
	"particles-js", //生成canvas父元素ID
	 {
		particles: {
			color: "#00ffff",
			shape: "circle",
			opacity: 1,
			size: 4, //线条顶点大小，值大点大
			size_random: !0,
			nb: 220, //顶点数量，值大点多
			line_linked: {
				enable_auto: !0,
				distance: 120, //一个顶点连的线条数量，值大线多
				color: "#00ffff",
				opacity: .8, //线条透明度
				width: 1,
				condensed_mode: {
					enable: !1,
					rotateX: 600,
					rotateY: 600
				}
			},
			anim: {
				enable: !0,
				speed: 2.5 //运动速度
			}
		},
		interactivity: {
			enable: !0,
			mouse: {
				distance: 250 //鼠标连接点的线条数，值大鼠标吸引的线多
			},
			detect_on: "canvas",
			mode: "grab",
			line_linked: {
				opacity: .35
			},
			events: {
				onclick: {
					enable: !0,
					mode: "push",
					nb: 3 //鼠标点击，扩散生成的顶点数
				}
			}
		},
		retina_detect: !0
	}
)

 

羽筠
关注
专栏目录
Canvas粒子线条连接动态背景特效.zip
07-05
Canvas粒子线条连接动态背景特效是一款可用于引导页的粒子线条动画特效。
Canvas全屏粒子网状线条特效
04-06
为了实现动画效果，我们需要在每帧都清除Canvas（使用`clearRect()`），然后重新绘制所有粒子和当前的鼠标线条。这通常通过`requestAnimationFrame()`函数来实现，它会告诉浏览器你希望执行一个动画，并请求浏览器...
canvas粒子线条效果
ancha7106的博客
09-05 464
在正式开始之前，先上个效果图看看： 很酷炫有木有？？？ 那么如何实现这个效果呢？ 首先，我做这个特效的基本步骤是这样的： 1.将若干个粒子随机分布在画布（canvas）上，并且给他们一个初始速度 2.为了不让粒子离开画布的可视范围，当粒子移动到画布边缘时，会进行反弹 3.设定一个最大距离，若粒子间的距离超过最大距离，便不会产生连线，若小于等于最大距离，则粒子间距越小...
ParticleEffect——canvas粒子效果组件
cc蒲公英的博客
09-08 1527
前言 1、本组件可以实现飘雪、下雨、花瓣、星火等粒子效果； 2、demo地址后面加上参数`?fps=1` 可以在页面左上角显示当前的fps状态； 3、组件有加入canvas支持判断，pc、移动都可以用 效果截图 栗子一 DEMO地址：http://www.w3cmark.com/demo/particle-effect.html HTML
探索创新：CanvasParticles - 点燃你的网页动态效果
最新发布
gitblog_00090的博客
04-20 280
探索创新：CanvasParticles - 点燃你的网页动态效果 去发现同类优质开源项目:https://gitcode.com/ 是一个开源的JavaScript库，专注于在HTML5 Canvas上创建引人入胜的粒子动画效果。如果你是Web开发者，正在寻找一种方法为你的网站增添独特的视觉吸引力，那么这个项目绝对值得你深入了解。 项目简介 CanvasParticles 提供了一套简洁而强大的...
canvas连线和左右关联滚动的插件better-scroll
haiTongZhouyj的博客
03-10 249
/* *@Description:demo---曲线图Demo *@FilePath:\zslh_bet\src\views\SScai\graph\demoGraph\DemoGraph.js *@auto:LiaoXiang *@Date:2020-03-0516:16:13 *@LastEditTime:2020-03-0717:20:53 ...
html5 canvas粒子螺旋线条动画特效.zip
09-26
在这个"html5 canvas粒子螺旋线条动画特效.zip"压缩包中，包含了一个利用Canvas API创建的粒子螺旋线条动画特效。这个特效可能是为了增强网站的交互性和视觉吸引力，尤其适用于那些希望在网页上添加独特视觉元素的...
粒子线条背景Canvas特效.zip
10-15
这个"粒子线条背景Canvas特效.zip"压缩包包含了一种利用HTML5 Canvas API实现的粒子线条动画特效，它能为网页提供独特且吸引人的背景效果。这种特效不仅美观，而且具有高度的可定制性，允许开发人员根据需求进行二次...
HTML5 canvas粒子生成人物面部轮廓插件
12-17
在这个“HTML5 canvas粒子生成人物面部轮廓插件”中，我们看到的是Canvas技术的一种创新应用，用于创建粒子动画来模拟人物面部轮廓。 首先，我们需要理解Canvas的基本概念。Canvas是一个基于矢量图形的画布，通过...
html5 canvas彩色网状线条粒子动画特效.zip
09-26
总的来说，这个资源提供了一个学习和实践HTML5 Canvas粒子动画的好机会，同时也展示了jQuery如何与Canvas结合，为Web开发带来更多的可能性。无论是初学者还是经验丰富的开发者，都可以从中获益，提升自己的技能。
HTML5 Canvas彩色发光线条波浪背景动画特效
06-11
一款十分炫酷的HTML5 Canvas彩色发光线条波浪背景动画特效，由线条组成，在运动的同时还有颜色变幻效果。
Canvas彩色发光3D线条动画特效
07-24
Canvas彩色发光3D线条动画特效是一款基于HTML5 Canvas绘制的全屏彩色网状线条发光酷炫动画特效。
html5 canvas五彩发光线条游走散开动画特效
06-11
html5 canvas绘制的一款五彩发光线条游走散开动画特效，炫酷彩色线条动画效果。
canvas 特效之变化线条
02-23
canvas 特效canvas 特效canvas 特效canvas 特效canvas 特效
html5 canvas酷炫的线条动画特效
09-08
html5 canvas酷炫的线条动画特效
网页点线粒子背景插件(交互式粒子) - Canvas-nest.js
晓Ming的博客
05-09 1356
bootCDN链接：https://cdn.bootcdn.net/ajax/libs/canvas-nest.js/2.0.4/canvas-nest.js color=“255,0,0” 背景粒子线的颜色值 opacity=“0.5” 背景粒子线的透明度，一般设置成0.5-1之间 count=“99” 背景粒子线的密度，建议不要太大，否则页面容易卡死 zIndex 项配置默认设置为-1，配置为0或1时，动画效果覆盖全屏，使页面出现链接获取不到焦点，无法点击链接。 效果图： 1，多次调用canv
canvas简单的粒子效果的实现
keader01的博客
12-18 6011
很久没有写博文了，今天抽空做了一个canvas的简单粒子效果 需要的基础知识有js的面向对象的基础， canvas的绘图基础 首先预览一下效果，点我进入 这里我们需要的就是通过定义粒子效果的对象以及粒子基点对象， 通过对对象关系分析来构造对象的基本结构，从而得到了一个简单的粒子效果 下面直接上完整代码， 注释已经添加在代码中了 粒子效果 body{
网页粒子背景插件 -Canvas-nest.js 指定具体位置展示
杨春建的博客
08-26 605
原文地址：https://blog.csdn.net/L1558198727/article/details/81121524 Canvas-nest.js是一个非常好看的网页粒子背景插件，不需要依赖任何第三方库即可运行，提供额非常炫酷的背景。但是默认的情况下是对整个body标签进行添加的，现在我们想让粒子指定具体的位置改怎么做呢？ ①我们首先打开Canvas-nest.js官方的实现 (...
canvas小格子发光js特效
ICode联盟
06-17 206
下载地址canvas实现的很多小格子发光特效dd:
HTML5 Canvas粒子动画进度条特效实现教程
通过使用jQuery插件，开发者可以更容易地集成和使用Canvas粒子动画进度条加载特效，无需从零开始编写所有的功能代码。 综上所述，HTML5 Canvas粒子动画进度条加载特效不仅能够提供视觉上的吸引和增强用户体验，还...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值