Accompany you to see the heart rain falling on this screen

Time:2021-12-4

Matrix digital rainA new skin

# Forked from http://jsbin.com/IDIgUL/8
c = document.getElementById('c')
ctx = c.getContext('2d')

# full screen
c.height = window.innerHeight
c.width = window.innerWidth


letters = "♥".split("")

font_size = 20
columns = c.width/font_size

drops = (1 for x in [0..columns])


# drawing the characters
draw = ->
  # black BG for the canvas
  ctx.fillStyle = "rgba(214,0, 0, 0.0520)"
  ctx.fillRect(0,0,c.width,c.height)

  ctx.fillStyle = "pink"
  ctx.font = "20pt Android"

  # looping over drops
  for i in  [0..drops.length]
    letter = letters[Math.floor(Math.random() * letters.length)]
    ctx.fillText(letter, i * font_size, drops[i] * font_size)
    if (drops[i] * font_size > c.height and Math.random() > 0.99)
        drops[i] = 0
    drops[i] = drops[i] + 1





setInterval(draw, 100/2.14)

Preview:http://jsbin.com/bijag

Recommended Today

Hive built-in function summary

1. Related help operation functions View built-in functions: Show functions; Display function details: desc function ABS; Display function extension information: desc function extended concat; 2. Learn the ultimate mental method of built-in function Step 1: carefully read all the functions of the show functions command to establish an overall understanding and impression Step 2: use […]