preface

The large picture on the front cover is for reference only.

Have you ever been excited when the DVD’s standby screen icon crashes into the corner of the screen?

Let’s watch a video and remember.

disclaimer

I’m not going to teach canvas, I’m just looking at it for fun.

It means make it a little rough, don’t spray me.

The effect

The frame count is slightly lower, but it’s certainly much smoother in practice.

implementation

HTML


      
<head>
  <meta name="viewport" content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <style>
    * {margin: 0;padding: 0; }body {background-color: lightblue; }#canvas {background-color: black;width: 100vw; }</style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>/ * see * /</script>
</body>
Copy the code

JS

window.onload = function () {
  let
    / / the canvas
    ctx = document.getElementById('canvas').getContext('2d'),
    // Canvas size
    canvas_width = document.getElementById('canvas').width,
    canvas_height = document.getElementById('canvas').height,
    // DVD icon text color, font, background color
    text_color = ['green'.'blue'.'purple'.'yellow'.'white'.'yellow'.'white'],
    text_font = 'italic bold 50px yahei',
    background_color = ['red'.'orange'.'yellow'.'green'.'blue'.'indigo'.'violet'].// Size of the background rectangle
    background_width = 110,
    background_height = 50.// The height is a bit off when adding text to the rectangle
    fix_height = 7.// Speed, 0.5 px per redraw
    speed_x = 0.5,
    speed_y = 0.5.// Start with 'r-b' right down
    direction = 'r-b'.// Icon the x and y coordinates, starting with 0
    position_x = 0,
    position_y = 0.// The number of collisions is used to calculate the background and text colors
    count = 0

  dvd()

  function dvd() {
    // Move direction
    switch (direction) {
      / / right
      case 'r-b':
        position_x += speed_x
        position_y += speed_y
        break
      / / right
      case 'r-t':
        position_x += speed_x
        position_y -= speed_y
        break
      / / lower left
      case 'l-b':
        position_x -= speed_x
        position_y += speed_y
        break
      / / left
      case 'l-t':
        position_x -= speed_x
        position_y -= speed_y
        break
    }
    // Empty the canvas
    ctx.clearRect(0.0, canvas_width, canvas_height)
    / / redraw
    ctx.fillRect(position_x, position_y, background_width, background_height)
    // Collision detection
    / / bottom
    if (position_y + background_height >= canvas_height) {
      direction = direction.replace('b'.'t')
      // The number of collisions
      count += 1
    }
    / / right
    if (position_x + background_width >= canvas_width) {
      direction = direction.replace('r'.'l')
      count += 1
    }
    / / left
    if (position_x < 0) {
      direction = direction.replace('l'.'r')
      count += 1
    }
    / /
    if (position_y < 0) {
      direction = direction.replace('t'.'b')
      count += 1
    }
    / / text
    ctx.font = text_font
    ctx.fillStyle = text_color[count % 7]
    ctx.fillText("DVD", position_x, position_y + background_height - fix_height)
    / / the background color
    ctx.fillStyle = background_color[count % 7]
    // Start animation
    window.requestAnimationFrame(dvd)
  }
}
Copy the code