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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！