不是打算教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').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, // 移動方向，初始為'rb' 右下direction = 'rb', // 圖示x 和y 座標，初始為0 position_x = 0, position_y = 0, // 碰撞次數，用來計算背景與文字顏色count = 0 dvd() function dvd() { // 移動方向switch (direction) { // 右下case 'rb': position_x += speed_x position_y += speed_y break // 右上case 'rt': position_x += speed_x position_y -= speed_y break // 左下case 'lb': position_x -= speed_x position_y += speed_y break // 左上case 'lt': position_x -= speed_x position_y -= speed_y break } // 清空畫布. 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_height - fix_height) // 背景色ctx.fillStyle = background_color[count % 7796]. requestAnimationFrame(dvd) }}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。