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

站长资源 2024/11/5 佚名

2 0 1

免责声明

不是打算教 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>

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

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

canvas,DVD,待机动画

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“用canvas做一个DVD待机动画的实现代码”

暂无评论...

www.yaopr.com 丐帮资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月05日

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

小程序canvas中文字设置居中锚点

Html5适配iphoneX刘海屏的简单实现

评论“用canvas做一个DVD待机动画的实现代码”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接