js画布实现下雪效果

程序猿小泓

于 2022-11-15 18:17:46 发布

阅读量404

点赞数

文章标签： javascript 前端开发语言动画

本文链接：https://blog.csdn.net/qq_37669585/article/details/127870770

版权

之前使用css实现了下雪效果，也对比了前端多种实现动画的方法（链接见文末）
下面使用js和canvas的方法配合requestAnimationFrame实现一个简单的下雪效果，代码十分精简。

代码

<body style="margin: 0;">
  <canvas id="cvs" style="background-color: black"></canvas>
</body>
<script>
  const cvs = document.querySelector('#cvs')
  const ctx = cvs.getContext('2d')
  // 全屏黑夜
  const { clientWidth: width, clientHeight: height } = document.documentElement
  cvs.width = width
  cvs.height = height
  ctx.fillStyle = '#ffffff'

  // 雪球位置
  const bgColors = Array.from(new Array(400)).map(v => {
    return {
      x: Math.random() * width,
      y: Math.random() * height,
      step: Math.random() * 2 + 0.5
    }
  })

  const render = () => {
    ctx.clearRect(0, 0, width, height)
    ctx.beginPath()
    bgColors.forEach(v => {
      v.y = v.y > height ? 0 : (v.y + v.step)
      ctx.rect(v.x, v.y, 3, 3)
    })
    ctx.fill()
    requestAnimationFrame(render)
  }

  render()
</script>