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> * {マージン: 0;パディング: 0;} body {背景色: ライトブルー;} #canvas {背景色: 黒;幅: 100vw;} </style></head><body> <canvas id=canvas></canvas> <script>/* 以下を参照*/</script></body>JS
window.onload = function () { let // Canvas ctx = document.getElementById('canvas').getContext('2d'), // キャンバスのサイズ Canvas_width = document.getElementById('canvas').width, Canvas_height = document .getElementById('canvas').height, // DVD アイコンの文字色、フォント、背景色 text_color = ['green', '青', '紫', '黄', '白', '黄', '白'], text_font = '斜体太字 50px 弥平', background_color = ['赤', 'オレンジ', '黄', ' green', 'blue', 'indigo', 'violet'], // 背景の四角形のサイズ background_width = 110, background_height = 50, //長方形にテキストを追加すると、高さが少しずれます fix_height = 7, // 速度、再描画ごとに 0.5 ピクセル移動しますspeed_x = 0.5,speed_y = 0.5, // 移動方向、最初は 'rb' 右下方向 = 'rb', // アイコンの x および y 座標、最初は 0 Position_x = 0、position_y = 0、 // 背景とテキストの色の計算に使用される衝突の数 = 0 dvd() function dvd() { // 移動方向切り替え (direction) { // 右下の場合 'rb': Position_x += Speed_x Position_y += Speed_y Break // 右上の場合 'rt': Position_x += Speed_x Position_y -= Speed_y Break // 左下のケース 'lb': Position_x -= Speed_x Position_y += Speed_y ブレーク // 左上のケース 'lt': 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) // 衝突検出 // Bottom if (position_y + background_height > = Canvas_height) { direct = direct.replace('b', 't') // 衝突回数 count += 1 } // 右の場合 (position_x + 背景幅 >= Canvas_width) { direct = direct.replace('r', 'l') count += 1 } // 左の if (position_x < 0) { direct = direct.replace(' l', 'r') count += 1 } // upper if (position_y < 0) { direct = direct.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] // アニメーション ウィンドウを開始します。 requestAnimationFrame(dvd) }}以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。