当前位置:Web前端 > > 正文

canvas两种形式动画(用canvas做一个DVD待机动画的实现代码)

时间:2021-10-01 01:03:11类别:Web前端

canvas两种形式动画

用canvas做一个DVD待机动画的实现代码

免责声明

不是打算教 canvas,只是觉得好玩就简单看了一下。

意思就是做得略粗糙,别喷我。。

canvas两种形式动画(用canvas做一个DVD待机动画的实现代码)

效果

帧数略低,实际当然流畅得多。

canvas两种形式动画(用canvas做一个DVD待机动画的实现代码) 

实现 HTML

  • <!DOCTYPE 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>/* 见下 */</script>
    </body>
    
  • JS

  • window.onload = function () {
      let
        // 画布
        ctx = document.getElementById('canvas').getContext('2d'),
        // 画布大小
        canvas_width = document.getElementById('canvas').width,
        canvas_height = document.getElementById('canvas').height,
        // DVD 图标的文本颜色、字体、背景色
        text_color = ['green', 'blue', 'purple', 'yellow', 'white', 'yellow', 'white'],
        text_font = 'italic bold 50px yahei',
        background_color = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'],
        // 背景矩形的尺寸
        background_width = 110,
        background_height = 50,
        // 向矩形添加文本时,高度有点偏差
        fix_height = 7,
        // 速度,每次重绘移动 0.5 px
        speed_x = 0.5,
        speed_y = 0.5,
        // 移动方向,初始为 'r-b' 右下
        direction = 'r-b',
        // 图标 x 和 y 坐标,初始为 0
        position_x = 0,
        position_y = 0,
        // 碰撞次数,用来计算背景和文本颜色
        count = 0
    
      dvd()
    
      function dvd() {
        // 移动方向
        switch (direction) {
          // 右下
          case 'r-b':
            position_x += speed_x
            position_y += speed_y
            break
          // 右上
          case 'r-t':
            position_x += speed_x
            position_y -= speed_y
            break
          // 左下
          case 'l-b':
            position_x -= speed_x
            position_y += speed_y
            break
          // 左上
          case 'l-t':
            position_x -= speed_x
            position_y -= speed_y
            break
        }
        // 清空画布
        ctx.clearRect(0, 0, canvas_width, canvas_height)
        // 重绘
        ctx.fillRect(position_x, position_y, background_width, background_height)
        // 碰撞检测
        // 底
        if (position_y + background_height >= canvas_height) {
          direction = direction.replace('b', 't')
          // 碰撞次数统计
          count += 1
        }
        // 右
        if (position_x + background_width >= canvas_width) {
          direction = direction.replace('r', 'l')
          count += 1
        }
        // 左
        if (position_x < 0) {
          direction = direction.replace('l', 'r')
          count += 1
        }
        // 上
        if (position_y < 0) {
          direction = direction.replace('t', 'b')
          count += 1
        }
        // 文本
        ctx.font = text_font
        ctx.fillStyle = text_color[count % 7]
        ctx.fillText("DVD", position_x, position_y + background_height - fix_height)
        // 背景色
        ctx.fillStyle = background_color[count % 7]
        // 开始动画
        window.requestAnimationFrame(dvd)
      }
    }
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    上一篇下一篇

    猜您喜欢

    热门推荐