HTML использует холст для достижения функции заграждения

В последнее время вам нужно сделать игрок, когда вы делаете большие домашние задания. Я вспомнил исходный код других и реализован, и демонстрация следующая

Судно

Установите цвет, скорость и тип заграждения

Отображение заграждения

Не могу полный экран

Холст не адаптируется к адаптации

Нет специального управления игроком

Соответствующий заграждение не отображается в соответствии с временем воспроизведения

Заграждение не может быть приостановлено

Известные дефекты будут улучшены в будущем. Исходный код заграждения, который можно найти в Интернете, обычно только затрагивает заграждение без статического заграждения.

Ядро всего игрока - это нарисовать текст и сделать текстовые анимации.

Сначала добавить видеотегии видео и кабели в файлах HTML

 <div id = barrageplayer> <canvas id = cv_video width = 900px height = 450px> </canvas> <видео ID = v_video src = test.mp4 controls = video/mp4>/video> </div>

Установите стиль позиции тега Canvas на позитив: Absolute, а затем видео и холст перекрываются вместе. Затем добавьте содержание заграждения в холст.

 var C = Document.GetElementByID (CV_VIDEO); ; , spey) {this.content = content; if (this.type == static top) {this.head = parseint ((c_height/2) -math.random ()*c_height/2) +10;} else if (this.type == static ttom) {this .Height = parseint ((c_height/2) +math.random ()*c_height/2) +10;} if (typeof this.move! = Function) {barrage.prototype.move. type == по умолчанию) {this.left = this.left-this.speed;}}}}}

Сконструированный объект заграждения инициализирует различные параметры, включая содержание, цвет, типы движения и скорость, определяя метод перемещения () для управления движением заграждения, каждый метод перемещения () для переворачивания скорости единицы влево каждый раз налево Левый метод слева

После завершения конструктора объекта заграждения введена тема, производство анимации непосредственно в коде

 // Круги и холст для достижения эффекта анимации setInterval (function () {ctx.clearrect (0,0, c_width, c_height); ctx.save (); for (var i = 0; i <msgs.length; i + +) {) {) {if (msgs [i]! = null) {if (msgs [i] .type == default) {handledefault (msgs [i]);} else {handlestate (msgs [i]); }}}}, 20)

Выполнить его каждые 20 мс, ctx.clearrct (0,0, c_width, c_height); Список заграждения, когда отправляется заграждение, в список будет добавлен экземпляр заграждения), а затем обрабатывается отдельно в соответствии с заграждением стиля по умолчанию или статического стиля. Если это заграждение в стиле по умолчанию, он будет обработан в соответствии со следующими методами

 // Обработайте функцию по умолчанию в стиле по умолчании HARDELEFAULT (BERAGE) {if (barrage.left == не определенное || barrage.left == null) {barrage.left = c.width;} else (barrag e.left <-200) {barrage = null;} else {barrage.move () ctx.fillstyle = barrage.color;

Прежде всего, если экземпляр заграждения не устанавливает левый атрибут, ширина холста дана ему. из экземпляра заграждения, чтобы изменить значение левого атрибута, затем установите цвет текста, напишите новый текст на первом уровне и восстановите холст. Это завершает кадр анимации.

Метод реализации статического заграждения заключается в следующем

 // Обработка функций статического заграждения (заграждение) 2. Barrage.height); (XT (, c_width/2, barrage.height); barrage = null; // ctx. Store (); ctx.clearrect (0,0, c_width, c_height);} else {barrage.left = barrage.left-6 ;

Прежде всего, базовая точка холста перемещается в центр холста. на этот холст. Затем установите выравнивание текста в среднее выравнивание, установите стиль текста и заполните текст. Поскольку заграждение статично, нет необходимости замедляться, но статический заграждение также исчезнет. Чтобы не занять дополнительные атрибуты здесь, мы напрямую используем левый атрибут в качестве логотипа, что также уменьшает левый атрибут. Таким образом, обработка статического заграждения реализована.

Другие люди, у которых есть определенная основа о настройке цвета и стиля, должно быть легко освоить и не представить его здесь.

Этот проект в основном использует холст для текстового рисунка и медленной анимации текста.

 Canvasdom.getConotext () canvas.save () /canvas.restore () canvas.clearrect () canvas.moveto ()

Оказывается, я не могу понять это с помощью Save () и Restore (). Перед изменением состояния холста. Например, когда я обрабатываю статический заград, базовая точка холста была изменена, поэтому метод очистки исходного холста больше не применим к текущему холсту. Затем вернитесь на оригинальный холст.

Запуск кода

 <! UAA -compatible Content = IE = EDGE> <Telect> Документ inline-black;} #white {founale: white;} #Red {founal: #ff6666;} #yellow {founale: #ffff00;} #blue { #333399;} #green {founal: #339933;} #cv_video { позиция: Absolute; ;} </style> <body> <div id = barrageplayer> <mvas id = cv_video width = 900px height = 450px> </canvas> <Видео ID = v_video src = test .mp4 Видео> </div> <div id = barrageInput> <div> <input type = text id = smsg chicolder = пожалуйста Colorpick> <div class = pickdiv id = white> </div> <div class = pickdiv id = red> </div> <div class = pickdiv id = желтый> </div> </div> div class = pickdiv id = Blue> </div> <div class = pickdiv id = green> </div> </div> <div id = typepick> <input type = radio name = type = dellaul t> по умолчанию <input type = radio name = Type value = static top> static top <input type = radio name = type value = static> static note </div> <div id = speedpick> <input type = radio name = speed value = 1> 1x <тип ввода = radio name = speed value = 2> 2x <input type = radio name = speed value = 3> 3x </div> <div id = stylepick> </div> <script> var c = document.getElementById (cv_video); Var typedom = document.getelementsbyname (type); 1; AddEventristener ('Click', Function) {switch (event.target.id) Color =#339933; длина; Speeddom [i]. ;} // // Функция заградных частей // // Объект заграждения (содержимое, цвет, тип, скорость) {this.content = content; = Speed; Parseint ((c_height/2) -math.random ()*c_height/2) +10;} else if (this.type == static note) {th. Height = parseint ((c_height/2) +math.random ()*c_height/2) +10;} if (typeof this.move! = function) {barrage.prototype.move = fuins {if (this. type == default) {this.left = this.left-this. Speed;}}} // Обведите холст эффекта анимации setInterval ;; Null) {if (msgs [i] .type == default) {handledefault (msgs [msgs [i]);} els Функция handledefault (barrage) {if (barrage.left == undefined || barrage.left == null) {barrage.left = c.width;} else {if (barrage.left <-200) {barrage = null;} else {barrage.move () ctx.fillstyle = barrage.color; {ctx.moveto (c_width/2, barrage.height); Слева = noversiced || = null;

Приведенное выше - HTML, представленная вам редактором для использования Canvas для реализации функции заграждения. Большое спасибо за вашу поддержку на веб -сайте Vevb Wulin!