本篇文章給大家分享的是有關(guān)使用canvas怎么繪制一個(gè)DVD待機(jī)動(dòng)畫，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計(jì)、網(wǎng)站制作與策劃設(shè)計(jì),固陽(yáng)網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:固陽(yáng)等地區(qū)。固陽(yáng)做網(wǎng)站價(jià)格咨詢:13518219792

 HTML

JS

window.onload = function () {
  let
    // 畫布
    ctx = document.getElementById('canvas').getContext('2d'),
    // 畫布大小
    canvas_width = document.getElementById('canvas').width,
    canvas_height = document.getElementById('canvas').height,
    // DVD 圖標(biāo)的文本顏色、字體、背景色
    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,
    // 向矩形添加文本時(shí)，高度有點(diǎn)偏差
    fix_height = 7,
    // 速度，每次重繪移動(dòng) 0.5 px
    speed_x = 0.5,
    speed_y = 0.5,
    // 移動(dòng)方向，初始為 'r-b' 右下
    direction = 'r-b',
    // 圖標(biāo) x 和 y 坐標(biāo)，初始為 0
    position_x = 0,
    position_y = 0,
    // 碰撞次數(shù)，用來(lái)計(jì)算背景和文本顏色
    count = 0

  dvd()

  function dvd() {
    // 移動(dòng)方向
    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)
    // 碰撞檢測(cè)
    // 底
    if (position_y + background_height >= canvas_height) {
      direction = direction.replace('b', 't')
      // 碰撞次數(shù)統(tǒng)計(jì)
      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]
    // 開始動(dòng)畫
    window.requestAnimationFrame(dvd)
  }
}

以上就是使用canvas怎么繪制一個(gè)DVD待機(jī)動(dòng)畫，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。