Canvas-40行代码的圣诞雪花

效果：

HTML代码：

< canvas id="snow" style="width:100%;height:300px;background: #272822;">

Javascript代码：

function $(id) {
  return document.getElementById(id)
}

snowCanvas = $('snow')
snowCanvas.width = parseInt(getComputedStyle(snowCanvas).width)
snowCanvas.height = parseInt(getComputedStyle(snowCanvas).height)
snowCTX = snowCanvas.getContext('2d')
snowCTX.strokeStyle = '#fff'

snowArray = []
snowCurrent = 100

function Snowing() {
  if (snowArray.length < snowCurrent)
    snowArray.push({
      x: Math.random() * snowCanvas.width,
      y: -snowArray.length * 10,
      r: Math.random(),
      v: Math.random() + .5
    })

  snowCTX.beginPath()
  snowCTX.clearRect(0, 0, snowCanvas.width, snowCanvas.height)
  snowArray.forEach(function(item, index) {
    if (item.y > snowCanvas.height)
      snowArray.splice(index, 1)
    snowCTX.moveTo(item.x, item.y += item.v)
    snowCTX.arc(item.x, item.y, item.r, 0, Math.PI * 2)
  })

  snowCTX.stroke()
  requestAnimationFrame(Snowing)
}

requestAnimationFrame(Snowing)

Coding By AIOS