canvas实现下雪的功能

实现原理：

利用canvas特性，在画布创建一定雪花，渲染出来，并设置雪花的下降速度
1.js部分

    const cvs = document.getElementById('canvas')//获取元素
    const ctx = cvs.getContext('2d')
    const {
      clientWidth: width,
      clientHeight: height
    } = document.documentElement//取屏幕宽高重新命名
    cvs.width = width
    cvs.height = height
    ctx.fillStyle = '#fff'//雪花颜色
  //创建所有雪花数据
    const bgColor = Array.from(new Array(400)).map(v => {
      return {
        x: Math.random() * width,
        y: Math.random() * height,
        step: Math.random() * 2.5 + 0.5
      }
    })
  //渲染
    const render = () => {
      ctx.clearRect(0, 0, width, height)
      ctx.beginPath()
      bgColor.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()

2.html部分

更多相关内容关注：bug纪念录