Я не планирую преподавать холст, я просто взглянул на него, потому что подумал, что это весело.
Это значит, что это немного грубо, так что не критикуйте меня. .
ЭффектЧастота кадров немного ниже, но реальная производительность, конечно, намного плавнее.
Внедрить HTML
<!DOCTYPE html><head> <meta name=viewport content=width=device-width, user-scalable=no, начальный масштаб=1.0, максимальный масштаб=1.0, минимальный масштаб=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 = 'курсив жирный, 50 пикселей yahei', 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() { // Переключатель направления движения (направление) { // Нижний правый регистр '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 Break // Верхний левый регистр '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) // Обнаружение столкновений // Внизу if (position_y + background_height > = Canvas_height) { Direction = Direction.replace('b', 't') // Счетчик столкновений += 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] // Запустить окно анимации. requestAnimationFrame (DVD) }}Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.