• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    用canvas做一个DVD待机动画的实现代码

    免责声明

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

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

    效果

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

     

    实现 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)
      }
    }

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    上一篇:Html5适配iphoneX刘海屏的简单实现
    下一篇:小程序canvas中文字设置居中锚点
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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