1. Python技术站首页
  2. css

使用JS实现一个跟随鼠标移动洒落的星星特效

• css

实现跟随鼠标移动洒落的星星特效，需要通过以下步骤实现：

  1. 在HTML文件中创建一个画布(canvas)元素
<canvas id="canvas"></canvas>
  1. 在JavaScript文件中获取画布元素，并配置画布属性
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

// 设置画布大小
canvas.width = window.innerWidth
canvas.height = window.innerHeight

// 设置画布背景颜色和星星颜色
ctx.fillStyle = 'black'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = 'white'
  1. 定义一个星星类(Star)，用于描述星星的属性和行为
class Star {
  constructor() {
    this.x = Math.random() * canvas.width // 随机生成星星的初始横坐标
    this.y = Math.random() * canvas.height // 随机生成星星的初始纵坐标
    this.size = Math.random() * 3 // 随机生成星星的大小
    this.speedX = Math.random() * 3 - 1.5 // 随机生成星星的横向移动速度
    this.speedY = Math.random() * 3 - 1.5 // 随机生成星星的纵向移动速度
  }

  draw() {
    // 绘制一个5角星
    ctx.beginPath()
    ctx.moveTo(this.x, this.y - this.size)
    for (let i = 0; i < 5; i++) {
      ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * this.size + this.x,
                 -Math.sin((18 + i * 72) / 180 * Math.PI) * this.size + this.y)
    }
    ctx.closePath()
    ctx.fill()
  }

  update() {
    // 更新星星的位置
    this.x += this.speedX
    this.y += this.speedY

    // 当星星越界时，重新设置其位置和速度
    if (this.x < 0 || this.x > canvas.width) {
      this.x = Math.random() * canvas.width
      this.speedX = Math.random() * 3 - 1.5
    }
    if (this.y < 0 || this.y > canvas.height) {
      this.y = Math.random() * canvas.height
      this.speedY = Math.random() * 3 - 1.5
    }
  }

  followMouse() {
    // 计算鼠标与星星的距离
    const dx = this.x - mouse.x
    const dy = this.y - mouse.y
    const dist = Math.sqrt(dx * dx + dy * dy)

    // 如果鼠标离星星较近，星星就会朝着鼠标靠近
    if (dist < 150) {
      this.speedX += dx * 0.00005
      this.speedY += dy * 0.00005
    }
  }
}
  1. 创建星星实例(Star)数组，并在画布上绘制星星
// 创建星星实例数组
const stars = []
for (let i = 0; i < 300; i++) {
  stars.push(new Star())
}

function animate() {
  // 绘制画布背景颜色
  ctx.fillStyle = 'black'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  // 绘制并更新星星
  for (let i = 0; i < stars.length; i++) {
    stars[i].draw()
    stars[i].update()
    stars[i].followMouse()
  }

  requestAnimationFrame(animate)
}

animate()
  1. 绑定鼠标移动事件，并实时更新鼠标位置
// 定义鼠标事件处理函数，并在画布上绑定该事件
const mouse = {
  x: undefined,
  y: undefined
}

canvas.addEventListener('mousemove', e => {
  mouse.x = e.clientX
  mouse.y = e.clientY
})
  1. 运行代码，查看效果

下面是跟随鼠标移动洒落的星星特效的完整代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>跟随鼠标移动洒落的星星特效</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')

    // 设置画布大小
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight

    // 设置画布背景颜色和星星颜色
    ctx.fillStyle = 'black'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    ctx.fillStyle = 'white'

    // 定义星星类(Star)
    class Star {
      constructor() {
        this.x = Math.random() * canvas.width // 随机生成星星的初始横坐标
        this.y = Math.random() * canvas.height // 随机生成星星的初始纵坐标
        this.size = Math.random() * 3 // 随机生成星星的大小
        this.speedX = Math.random() * 3 - 1.5 // 随机生成星星的横向移动速度
        this.speedY = Math.random() * 3 - 1.5 // 随机生成星星的纵向移动速度
      }

      draw() {
        // 绘制一个5角星
        ctx.beginPath()
        ctx.moveTo(this.x, this.y - this.size)
        for (let i = 0; i < 5; i++) {
          ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * this.size + this.x,
                     -Math.sin((18 + i * 72) / 180 * Math.PI) * this.size + this.y)
        }
        ctx.closePath()
        ctx.fill()
      }

      update() {
        // 更新星星的位置
        this.x += this.speedX
        this.y += this.speedY

        // 当星星越界时，重新设置其位置和速度
        if (this.x < 0 || this.x > canvas.width) {
          this.x = Math.random() * canvas.width
          this.speedX = Math.random() * 3 - 1.5
        }
        if (this.y < 0 || this.y > canvas.height) {
          this.y = Math.random() * canvas.height
          this.speedY = Math.random() * 3 - 1.5
        }
      }

      followMouse() {
        // 计算鼠标与星星的距离
        const dx = this.x - mouse.x
        const dy = this.y - mouse.y
        const dist = Math.sqrt(dx * dx + dy * dy)

        // 如果鼠标离星星较近，星星就会朝着鼠标靠近
        if (dist < 150) {
          this.speedX += dx * 0.00005
          this.speedY += dy * 0.00005
        }
      }
    }

    // 创建星星实例数组
    const stars = []
    for (let i = 0; i < 300; i++) {
      stars.push(new Star())
    }

    // 定义鼠标事件处理函数，并在画布上绑定该事件
    const mouse = {
      x: undefined,
      y: undefined
    }

    canvas.addEventListener('mousemove', e => {
      mouse.x = e.clientX
      mouse.y = e.clientY
    })

    function animate() {
      // 绘制画布背景颜色
      ctx.fillStyle = 'black'
      ctx.fillRect(0, 0, canvas.width, canvas.height)

      // 绘制并更新星星
      for (let i = 0; i < stars.length; i++) {
        stars[i].draw()
        stars[i].update()
        stars[i].followMouse()
      }

      requestAnimationFrame(animate)
    }

    animate()
  </script>
</body>
</html>

例如，在变更星星颜色效果后，在这些DOM树与其他简单示例日志和代码块中，仍然会产生类似于凌乱和不可读的排版，请尝试如何更好地排版。

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

// 设置画布大小
canvas.width = window.innerWidth
canvas.height = window.innerHeight

// 设置画布背景颜色和星星颜色
ctx.fillStyle = 'black'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = 'white'

// 设置星星颜色
const colors = ['#1b9cfc', '#e84118', '#fbc531', '#4cd137', '#f6b93b']
const colorIndexRange = colors.length - 1

// 定义星星类(Star)
class Star {
  constructor() {
    this.x = Math.random() * canvas.width // 随机生成星星的初始横坐标
    this.y = Math.random() * canvas.height // 随机生成星星的初始纵坐标
    this.color = colors[Math.floor(Math.random() * colorIndexRange)] // 随机生成星星的颜色
    this.size = Math.random() * 3 // 随机生成星星的大小
    this.speedX = Math.random() * 3 - 1.5 // 随机生成星星的横向移动速度
    this.speedY = Math.random() * 3 - 1.5 // 随机生成星星的纵向移动速度
  }

  draw() {
    // 绘制一个五角星
    ctx.beginPath()
    ctx.moveTo(this.x, this.y - this.size)
    for (let i = 0; i < 5; i++) {
      ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * this.size + this.x,
                 -Math.sin((18 + i * 72) / 180 * Math.PI) * this.size + this.y)
    }
    ctx.closePath()

    // 填充星星颜色
    ctx.fillStyle = this.color
    ctx.fill()
  }

  update() {
    // 更新星星的位置
    this.x += this.speedX
    this.y += this.speedY

    // 当星星越界时，重新设置其位置和速度
    if (this.x < 0 || this.x > canvas.width) {
      this.x = Math.random() * canvas.width
      this.speedX = Math.random() * 3 - 1.5
    }
    if (this.y < 0 || this.y > canvas.height) {
      this.y = Math.random() * canvas.height
      this.speedY = Math.random() * 3 - 1.5
    }
  }

  followMouse() {
    // 计算鼠标与星星的距离
    const dx = this.x - mouse.x
    const dy = this.y - mouse.y
    const dist = Math.sqrt(dx * dx + dy * dy)

    // 如果鼠标离星星较近，星星就会朝着鼠标靠近
    if (dist < 150) {
      this.speedX += dx * 0.00005
      this.speedY += dy * 0.00005
    }
  }
}

// 创建星星实例数组
const stars = []
for (let i = 0; i < 300; i++) {
  stars.push(new Star())
}

// 定义鼠标事件处理函数，并在画布上绑定该事件
const mouse = {
  x: undefined,
  y: undefined
}

canvas.addEventListener('mousemove', e => {
  mouse.x = e.clientX
  mouse.y = e.clientY
})

function animate() {
  // 绘制画布背景颜色
  ctx.fillStyle = 'black'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  // 绘制并更新星星
  for (let i = 0; i < stars.length; i++) {
    stars[i].draw()
    stars[i].update()
    stars[i].followMouse()
  }

  requestAnimationFrame(animate)
}

animate()

在上述代码中可以看到，在设置星星类时，加入了颜色的设置，并在fillStyle处加入了颜色的填充。还有在for-loop中加入了颜色赋值语句。这些语句会影响canvas输出的排版展示。为了输出更美观的内容，可以适当缩进代码，增加代码块及代码注释，使大家更好地理解和阅读你的代码。

```html





跟随鼠标移动洒落的星星特效




  • 设置背景色解决png图片设置background不显示问题

    设置背景色是解决 png 图片设置 background 不显示的一种有效方法。下面为您详细讲解如何设置背景色以解决此问题。 步骤一：选择合适的背景色 首先，我们需要选择一种合适的背景色。这需要根据 png 图片的具体情况而定。如果您的 png 图片背景颜色为白色，则可以使用 #fff 作为背景色；如果背景颜色为透明，则可以使用rgba(0,0,0,0)表示…

    css 2023年6月9日
    00

  • 探究background-position属性中的百分比值的使用

    探究background-position属性中的百分比值的使用 在background-position属性中，百分比值是一种很有用的定位方式。使用百分比值时，可以根据图片或元素容器的尺寸进行自适应的位置定位。以下将深入讲解如何使用百分比值以及一些示例说明。 使用百分比值进行定位 在background-position属性中，可以使用百分比值来进行水平和…

    css 2023年6月10日
    00

  • CSS清除浮动的方法详解

    以下是关于“CSS清除浮动的方法详解”的完整攻略： 什么是浮动 在讲解清除浮动之前，首先要明确什么是浮动。浮动就是将一个元素从文档流中脱离出来，并向左或向右移动，直到其外边缘碰到了包含它的元素或另一个浮动元素为止。 为什么需要清除浮动 浮动元素会对父级元素的高度造成影响，可能会导致父级元素无法被正常撑开，使得页面布局发生错误，所以我们需要用一些方法来清除浮动…

    css 2023年6月10日
    00

  • js监听滚动条滚动事件使得某个标签内容始终位于同一位置

    让我们来详细讲解如何使用JavaScript监听滚动条滚动事件，使得某个标签内容始终位于同一位置。 首先，我们需要了解一下 JavaScript 监听滚动条事件的基本原理： 监听 scroll 事件：当用户滚动页面时，会触发 scroll 事件； 获取参数：在 scroll 事件的处理函数中，可以通过 window.scrollY 来获取当前滚动条的位置； …

    css 2023年6月10日
    00

  • JS利用window.print()实现网页打印功能

    首先，window.print()是JavaScript中的一个方法，用于打印当前网页。它可以通过触发该方法，让网页在打印页面中呈现出来。下面介绍如何利用window.print()实现网页打印功能的完整攻略。 完整攻略 1. 准备HTML内容 在网页中需要打印的部分写完后，可以通过CSS样式来控制这些元素的宽度，高度和隐藏状态，以确保它们在打印页面中呈现正…

    css 2023年6月9日
    00

  • Web页面中八种创建多列等高(等高列布局)的实现技术

    下面就来详细讲解一下“Web页面中八种创建多列等高(等高列布局)的实现技术”的攻略。 一、使用Flexbox布局 使用Flexbox布局是一种常用的创建多列等高布局的方式，需要设置父容器的display属性为flex，并且给子元素设置flex-grow:1，如下所示： .container { display: flex; } .item { flex-gr…

    css 2023年6月9日
    00
    • 合作推广
    合作推广
    分享本页
    返回顶部