html5粒子效果背景

html5粒子效果背景(react,angular,vue,html5)

1. es6

function canvasMeasure (el, canvasEl) {canvasEl.width = el.clientWidthcanvasEl.height = el.clientHeight
}function borderPoint (point, canvasEl) {let p = pointif (point.x <= 0 || point.x >= canvasEl.width) {p.vx = -p.vxp.x += p.vx} else if (point.y <= 0 || point.y >= canvasEl.height) {p.vy = -p.vyp.y += p.vy} else {p = {x: p.x + p.vx,y: p.y + p.vy,vx: p.vx,vy: p.vy}}return p
}function drawLine (args) {let dist = nulllet context = args.canvasfor (let i = 0, len = args.count; i < len; i++) {// 初始化最大连接数args.points[i].maxConn = 0for (let j = 0; j < len; j++) {if (i !== j) {dist = Math.round(args.points[i].x - args.points[j].x) * Math.round(args.points[i].x - args.points[j].x) +Math.round(args.points[i].y - args.points[j].y) * Math.round(args.points[i].y - args.points[j].y)// 两点距离小于吸附距离，而且小于最大连接数，则画线if (dist <= args.dist && args.points[i].maxConn < args.maxConn) {args.points[i].maxConn++// 距离越远，线条越细，而且越透明context.lineWidth = 0.5 - dist / args.distcontext.strokeStyle = 'rgba(' + args.stroke + ',' + (1 - dist / args.dist) + ')'context.beginPath()context.moveTo(args.points[i].x, args.points[i].y)context.lineTo(args.points[j].x, args.points[j].y)context.stroke()}}}// 如果鼠标进入画布if (args.mouse) {dist = Math.round(args.points[i].x - args.mouse.x) * Math.round(args.points[i].x - args.mouse.x) +Math.round(args.points[i].y - args.mouse.y) * Math.round(args.points[i].y - args.mouse.y)// 遇到鼠标吸附距离时加速，直接改变point的x，y值达到加速效果if (dist > args.dist && dist <= args.eDist) {args.points[i].x = args.points[i].x + (args.mouse.x - args.points[i].x) / 20args.points[i].y = args.points[i].y + (args.mouse.y - args.points[i].y) / 20}if (dist <= args.eDist) {context.lineWidth = 1context.strokeStyle = 'rgba(' + args.stroke + ',' + (1 - dist / args.eDist) + ')'context.beginPath()context.moveTo(args.points[i].x, args.points[i].y)context.lineTo(args.mouse.x, args.mouse.y)context.stroke()}}}
}function drawPoint (args) {let context = args.canvaslet point = nullcontext.clearRect(0, 0, args.canvasEl.width, args.canvasEl.height)context.beginPath()context.fillStyle = args.colorfor (let i = 0, len = args.count; i < len; i++) {if (args.points.length !== args.count) {// 初始化所有点point = {x: Math.floor(Math.random() * args.canvasEl.width),y: Math.floor(Math.random() * args.canvasEl.height),vx: args.vx / 2 - Math.random() * args.vx,vy: args.vy / 2 - Math.random() * args.vy}} else {// 处理球的速度和位置，并且做边界处理point = borderPoint(args.points[i], args.canvasEl)}context.fillRect(point.x - args.width / 2, point.y - args.height / 2, args.width, args.height)args.points[i] = point}drawLine(args)context.closePath()
}function canvasParticle ({el,vx = 4, // 小球x轴速度,正为右，负为左vy = 4, // 小球y轴速度width = 2, // 小球高宽，其实为正方形，所以不宜太大height = 2,count = 300, // 点个数color = '#79a2b9', // 点颜色stroke = '130,255,255', // 线条颜色dist = 6000, // 点吸附距离eDist = 20000,maxConn = 10
}) {let canvasEl = document.createElement('canvas')let canvas = canvasEl.getContext('2d')if (!canvas) {console.error(`your browser not support canvas`)return}el.appendChild(canvasEl)canvasEl.style = 'position: fixed; top: 0; left: 0'canvasMeasure(el, canvasEl)window.onresize = function () {canvasMeasure(el, canvasEl)}let [points, mouse] = [[], null]el.onmousemove = function (e) {let event = e || window.eventmouse = {x: event.clientX,y: event.clientY}}el.onmouseleave = function () {mouse = null}setInterval(function () {drawPoint({el,canvasEl,canvas,vx,vy,width,height,count,color,stroke,dist,eDist,maxConn,points,mouse})}, 40)
}export default canvasParticle

调用

canvasParticle({el: document.getElementById('particle')})

export default (function () {// 根据传入的config初始化画布function canvasInit (canvasConfig) {canvasConfig = canvasConfig || {}// 获取特定div作为背景// mydiv是你想要将其作为背景的div的IDvar body = document.getElementById('mydiv')var canvasObj = document.createElement('canvas')var canvas = {element: canvasObj,points: [],// 默认配置config: {vx: canvasConfig.vx || 4, // 小球x轴速度,正为右，负为左vy: canvasConfig.vy || 4, // 小球y轴速度width: canvasConfig.width || 2, // 小球高宽，其实为正方形，所以不宜太大height: canvasConfig.height || 2, // 点个数count: canvasConfig.count || 100, // 点颜色color: canvasConfig.color || '121, 162, 185',stroke: canvasConfig.stroke || '130,255,255', // 线条颜色dist: canvasConfig.dist || 6000, // 点吸附距离e_dist: canvasConfig.e_dist || 20000, // 鼠标吸附加速距离max_conn: 10 // 最大连接数}}// 获取contextif (canvas.element.getContext('2d')) {canvas.context = canvas.element.getContext('2d')} else {return null}body.style.padding = '0'body.style.margin = '0'body.appendChild(canvas.element)canvas.element.style = 'position: fixed top: 0 left: 0 z-index: -1'canvasSize(canvas.element)window.onresize = function () {canvasSize(canvas.element)}body.onmousemove = function (e) {var event = e || window.eventcanvas.mouse = {x: event.clientX,y: event.clientY}}document.onmouseleave = function () {canvas.mouse = undefined}setInterval(function () {drawPoint(canvas)}, 40)}// 设置canvas大小function canvasSize (canvas) {// 获取特定div的宽高var width = document.getElementById('mydiv').style.widthvar height = document.getElementById('mydiv').style.heightwidth = parseInt(width)height = parseInt(height)canvas.width = width || window.innerWeight || document.documentElement.clientWidth || document.body.clientWidthcanvas.height = height || window.innerWeight || document.documentElement.clientHeight || document.body.clientHeight}// 画点function drawPoint (canvas) {var context = canvas.contextvar point = nullcontext.clearRect(0, 0, canvas.element.width, canvas.element.height)context.beginPath()context.fillStyle = 'rgb(' + canvas.config.color + ')'for (var i = 0, len = canvas.config.count; i < len; i++) {if (canvas.points.length !== canvas.config.count) {// 初始化所有点point = {x: Math.floor(Math.random() * canvas.element.width),y: Math.floor(Math.random() * canvas.element.height),vx: canvas.config.vx / 2 - Math.random() * canvas.config.vx,vy: canvas.config.vy / 2 - Math.random() * canvas.config.vy}} else {// 处理球的速度和位置，并且做边界处理point = borderPoint(canvas.points[i], canvas)}context.fillRect(point.x - canvas.config.width / 2, point.y - canvas.config.height / 2, canvas.config.width, canvas.config.height)canvas.points[i] = point}drawLine(context, canvas, canvas.mouse)context.closePath()}// 边界处理function borderPoint (point, canvas) {var p = pointif (point.x <= 0 || point.x >= canvas.element.width) {p.vx = -p.vxp.x += p.vx} else if (point.y <= 0 || point.y >= canvas.element.height) {p.vy = -p.vyp.y += p.vy} else {p = {x: p.x + p.vx,y: p.y + p.vy,vx: p.vx,vy: p.vy}}return p}// 画线function drawLine (context, canvas, mouse) {var dist = nullcontext = context || canvas.contextfor (var i = 0, len = canvas.config.count; i < len; i++) {// 初始化最大连接数canvas.points[i].max_conn = 0// point to pointfor (var j = 0; j < len; j++) {if (i !== j) {dist = Math.round(canvas.points[i].x - canvas.points[j].x) * Math.round(canvas.points[i].x - canvas.points[j].x) +Math.round(canvas.points[i].y - canvas.points[j].y) * Math.round(canvas.points[i].y - canvas.points[j].y)// 两点距离小于吸附距离，而且小于最大连接数，则画线if (dist <= canvas.config.dist && canvas.points[i].max_conn < canvas.config.max_conn) {canvas.points[i].max_conn++// 距离越远，线条越细，而且越透明context.lineWidth = 0.5 - dist / canvas.config.distcontext.strokeStyle = 'rgba(' + canvas.config.stroke + ',' + (1 - dist / canvas.config.dist) + ')'context.beginPath()context.moveTo(canvas.points[i].x, canvas.points[i].y)context.lineTo(canvas.points[j].x, canvas.points[j].y)context.stroke()}}}// 如果鼠标进入画布// point to mouseif (mouse) {dist = Math.round(canvas.points[i].x - mouse.x) * Math.round(canvas.points[i].x - mouse.x) +Math.round(canvas.points[i].y - mouse.y) * Math.round(canvas.points[i].y - mouse.y)// 遇到鼠标吸附距离时加速，直接改变point的x，y值达到加速效果if (dist > canvas.config.dist && dist <= canvas.config.e_dist) {canvas.points[i].x = canvas.points[i].x + (mouse.x - canvas.points[i].x) / 20canvas.points[i].y = canvas.points[i].y + (mouse.y - canvas.points[i].y) / 20}if (dist <= canvas.config.e_dist) {context.lineWidth = 1context.strokeStyle = 'rgba(' + canvas.config.stroke + ',' + (1 - dist / canvas.config.e_dist) + ')'context.beginPath()context.moveTo(canvas.points[i].x, canvas.points[i].y)context.lineTo(mouse.x, mouse.y)context.stroke()}}}}return canvasInit
})()

window.onload = function() {//配置var config = {vx: 4,	//小球x轴速度,正为右，负为左vy: 4,	//小球y轴速度height: 2,	//小球高宽，其实为正方形，所以不宜太大width: 2,count: 200,		//点个数color: "121, 162, 185", 	//点颜色stroke: "130,255,255", 		//线条颜色dist: 6000, 	//点吸附距离e_dist: 20000, 	//鼠标吸附加速距离max_conn: 10 	//点到点最大连接数}//调用CanvasParticle(config);}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！