欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

html5粒子效果背景

程序员文章站 2022-05-29 07:52:19
...

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

1. es6

function canvasMeasure (el, canvasEl) {
  canvasEl.width = el.clientWidth
  canvasEl.height = el.clientHeight
}

function borderPoint (point, canvasEl) {
  let p = point
  if (point.x <= 0 || point.x >= canvasEl.width) {
    p.vx = -p.vx
    p.x += p.vx
  } else if (point.y <= 0 || point.y >= canvasEl.height) {
    p.vy = -p.vy
    p.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 = null
  let context = args.canvas
  for (let i = 0, len = args.count; i < len; i++) {
    // 初始化最大连接数
    args.points[i].maxConn = 0
    for (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.dist
          context.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) / 20
        args.points[i].y = args.points[i].y + (args.mouse.y - args.points[i].y) / 20
      }
      if (dist <= args.eDist) {
        context.lineWidth = 1
        context.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.canvas
  let point = null
  context.clearRect(0, 0, args.canvasEl.width, args.canvasEl.height)
  context.beginPath()
  context.fillStyle = args.color
  for (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.event
    mouse = {
      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')})


2. es5

export default (function () {
  // 根据传入的config初始化画布
  function canvasInit (canvasConfig) {
    canvasConfig = canvasConfig || {}
    // 获取特定div作为背景
    // mydiv是你想要将其作为背景的div的ID
    var 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 // 最大连接数
      }
    }

    // 获取context
    if (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.event
      canvas.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.width
    var height = document.getElementById('mydiv').style.height
    width = parseInt(width)
    height = parseInt(height)
    canvas.width = width || window.innerWeight || document.documentElement.clientWidth || document.body.clientWidth
    canvas.height = height || window.innerWeight || document.documentElement.clientHeight || document.body.clientHeight
  }

  // 画点
  function drawPoint (canvas) {
    var context = canvas.context
    var point = null
    context.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 = point
    if (point.x <= 0 || point.x >= canvas.element.width) {
      p.vx = -p.vx
      p.x += p.vx
    } else if (point.y <= 0 || point.y >= canvas.element.height) {
      p.vy = -p.vy
      p.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 = null
    context = context || canvas.context
    for (var i = 0, len = canvas.config.count; i < len; i++) {
      // 初始化最大连接数
      canvas.points[i].max_conn = 0
          // point to point
      for (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.dist
            context.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 mouse
      if (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) / 20
          canvas.points[i].y = canvas.points[i].y + (mouse.y - canvas.points[i].y) / 20
        }
        if (dist <= canvas.config.e_dist) {
          context.lineWidth = 1
          context.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);
		}


html5粒子效果背景