Недавно я начал разрабатывать платформу видео -сайты и достиг функции заграждения через холст в HTML5.
Тогда не говорите о сплетнях, давайте сначала поговорим о том, чтобы думать.
Идея: из макета страницы он охватывает холст в окне видео, сгенерированного видео тегом, и его можно достичь с помощью абсолютного позиционирования. Наиболее важным является отображение заграждения на холсте JS. и заграждение - это заграждение. Объект заграждения имеет методы включают в себя: установить горизонтальные вертикальные координаты заграждения, движение заграждения. Принцип реализации - это событие, где начинает воспроизводить видео, и время начинается время. Код заграждения, таймер также имеет код для обновления массива пулей.
На рисунке ниже - скриншот эффекта заграждения
Затем запустите код напрямую:
(Function () {window.onload = function () {var video = document.getelementsbytagname (video) [0] var cav = document.getelementsbytagname (canvas) [0] // Установите высоту и ширину постоянного Canvas var cavwidthth = 800 var cavheight = 420 cav.width = cavwidth cav.height = cavheight var ctx = cav.getcontext (2d) // массив объекта заземления хранилища var capobjs = [] var lastiTemtime var var var ovintele = document.getelementsbyname (Подпись -Input-Text) [0] var sendele = document.getelementsbyclassname (caption-sendbutton) [0] var colorm = document.getElementsbyclassname (coloritems) [0] ar ismoveinputele = document.getelementsbyclassname (caption-ismove) [ 0] // Цвет заземления VAR Colors = [#FFF,#FFCCCC,#CCFFCC,#CCCCFF,#FFFFCC,#CCFFFFF] var SELECTCOLORINDEX = 0 var prevplayTime = 0 // Тестовые данные. // массив универсатилей в Канаде в Canvas varitobjs = [{blank: true, значение: 20, индекс: 0}, {blank: true: значение: 50, индекс: 1}, {blank: true, значение: значение: 80, индекс: 2}, {blank: true, значение: 110, индекс: 3}, {blank: true, значение: 140, индекс: 4}, {blank: true, значение: 170, индекс: 5}, {{ Бланк: true, значение: 200, индекс: 6}, {blank: true, значение: 230, индекс: 7}, {blank: true, значение: 260, индекс: 8}, {blank: true, значение: 290, Index: 9}, {Blank: True, Value: 320, Index: 10}, {Blank: True, Value: 350, Index: 11}, {Blank: True, Value: 380, Index: 12}, {{{ Бланк: true, значение: 410, индекс: 13}] // тест данных тестирования данных var testarray = [{content: abcdefghijklmnopqrstuvwxyz, время: 1, ismove: false, colorindex: 0}, {Conne, Tent: 233333333333, Время: {Conne, 233333333333, время: время: время: 2, Ismove: True, Colorindex: 0}, {Содержание: Dry, Hahaha ~~~~~~, Time: 2, Ismove: True, Colorindex: 5}, {Содержание: Сухо 2, Ismove: True, Colorindex: 4}, {Содержание: сухой тост, хахаха ~~~~~~, время: 2, Ismove: true, colorindex: 4}, {Содержание: сухой тост, хахаха ~~~ ~~ ~, Время: 2, Ismove: True, Colorindex: 0}, {Содержание: сухой тост, хахаха ~~~~~, время: 2, Ismove: true, colorindex: 0}, {Содержание: 2333333333333, время: 3, Ismove: True, Colorindex: 0}, {Содержание: 233333333333333, Время: 3, ISMOVE: TRUE, ColorIndex: 0}, {Содержание: 23333333333333, Время: 3, ISMOVE: t: t rue, colorindex: 0}, {Содержание. : 23333333333333333, Время: 3, Ismove: True, Colorindex: 0}, {Содержание: 23333333333, Время: 3, Ismove: True, Colorindex: 0}, {Содержание: 2333333333333 333, время: 3, ismove: true,: true,: trueDex. 0}, {Содержание: 2333333333333333, время: 4, ISMOVE: FALSE, Colorindex: 0}, {Co Ntent: 2333333333333, время: 5, ISMOVE: Truex: 4}, {конференция: {конференция: 2333333333333, {6, 6, 6, 6, конференция: 23333333333333333, 6, 6, 6, конференция: Ismove: True, Colorindex: 2}, {Содержание: 233333333333333, время: 7, ISMOVE: TRUE, ColorIndex: 2}, {Содержание: 2333333333333, Время: 7, ISMOVE: TRUE, COLORIRINDEX: 2}, {Содержание: 2333333333333333333333 годы3333333333333 годы3333333333333 годы333333333333 годы33333333333 годы Время: 7, Ismove: True, Colorindex: 2}, {Содержание: 233333333333333, Время: 7, ISMOV E: TRUE, ColorIndex: 2}, {Содержание: 2333333333333, Время: 7, ISMOVE: true: true, colorindex: 2. }, {Содержание: 233333333333333, время: 7, ISMOVE: TRUE, ColorIndex: 2}, {Содержание: 233333333333333, время: 8, ISMOVE: TRUE, COLRINDEX: 0}, {Содержание: 2333333333333, Время: 9, ISM True, Colorindex: 0}, {Content: 2333333333333333, Время: 10, Ismove: True, Colorindex: 0}, {Содержание: Учитель очень хорошо сказал, я хочу усердно учиться »,« », IS: 12, Ismove: TRUE, ColorIndex: 0}, {Content: 老师说的非常好 ， 我要好好学习了》》》》, время: 13, ismove: true, colorindex: 0}, {Содержание: 老师说的非常好 ， 我要好好学习了》》》》, Время: 14, Ismove: True, Colorindex: 2}, {Контент: Учитель сказал очень хорошо, я хочу усердно учиться "" "" "" ", IS: 15, Ismove: False, ColorIndex: 0}, {Контент: Учитель: Учитель очень хорошо сказал, я хочу усердно учиться "" "" "" ", 16, Ismove: True, Colorindex: 2}, {Содержание: Учитель сказал очень хорошо, я хочу Чтобы изучить "" "" "", ismove: true, colorindex: 3}, {content: учитель сказал очень хорошо, я хочу усердно учиться "" "" "" ", время: 18, Ismove: true, colorindex: 2}, {Контент: учитель сказал очень хорошо, я хочу усердно учиться "" "" "", время: 19, Ismove: True, Colorindex: 0}, {Содержание: Учитель очень хорошо сказал, я хочу хорошо учиться "" "" " "", 20, ISMOVE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: TRUE: true : true: true, colorindex: 3}, {content: учитель сказал очень хорошо, я хочу усердно учиться "" "" "" "", время: 21, Ismove: true, colorindex: 0}, {конференция: Учитель сказал Очень хорошо, я хочу быть хорошим, я хочу быть хорошим. Маленькая ракета смазывается =========, Время: 23, Ismove: True, Colorindex: 0}, {Содержание: Старое железо, маленькие подарки взяли волну, маленькие ракеты чистились ==== ==============: true, colorindex: 0}, {Содержание: Старое железо, маленькие подарки взяли волну, маленькие автомобильные ракеты чистите UP =======, Время: 25, Ismove: True, Colorindex: 3: 3}, {Содержание: Старое железо, маленькие подарки взяли волну, маленькие ракеты почистились ======== ColorIndex: 0}, {Содержание: Старое: Старое железо, маленькие подарки взяли волну, маленькие ракеты автомобиля смазываются ========= , {Содержание: Старое железо, маленькие подарки, иди, это волна, маленькая автомобильная ракетная кисть его ============================================================================== ============================================================================= ============================================================================= ======== = Автомобиль, машина - это машина, машина - это машина маленькие ракет, чтобы кисти ============================================================================== ============================================================================= ============================================================================= ======================================================================= =, время: 30, Ismove: True, Colorindex: 5}, {Содержание: сразу после класса, Varo Lan поднимается ~~~, время: 31, Ismove: True, Colorindex: 5}, {Содержание: I'm Is Пройдя в класс сразу же, Varo Blue Continent встает ~~~, время: 32, Ismove: True, Colorindex: 2}, {Содержание: сразу после класса, синий континент Varo поднимается и встает. Время: 33, Ismove: True, Colorindex: 2}, {Содержание: сразу после класса, Varo Blue Continental встает В гостях, и Варо Лан ушел. Ismove: True, Colorindex: 2}, {Content: сразу: сразу после класса, Mainland Varo Lan поднялась ~~~, время: 37, Ismove: True, Colorindex: 2}] // Обратно для тестовых данных (Testarray , Testaraycopy) /*объекты Barbite, параметры, параметры, параметры, они: 1.ISSIMPEAVE: Является ли заград мобильным заград. .Text: текст заграждения* / /**Прототип метод цепочки CettePvalue устанавливает вертикальные координаты, установка SetLeftValue устанавливает горизонтальную координату, движущая Col, текст) {this.ismove = ismove this. .topindex = 0 this.occupypos = true this.top = 300 this.left = 0 this .setValue () this.setTopValue ()} cOnt.prototype.setTopValue = function () {for (var i = 0, len = topobjs .Length; .prototype.setleftValue = function () {if (this.is.is.is.is ove) {this.left = cavwidth} else {var contentLength = this.content.length var nowitemleft = 420 -contentlength * 9 this.left. = Nowitemleft}} Подпись. topindex] .blank = true}} time += 1 if (this.latesttime> 450) {topobjs [this.topindex] .blank = true}}} cappion.prototype.setid = function () {this.id = capobjid capobjid ++} var cap1 = new Capting (F. alse, 1, 0, небольшие подарки, которые принимают волну, двойной клик 6666. Сущность Сущность Сущность ) Capobjs.push (cap1) cap1.setId () // Обведите массив и нарисуйте функцию DrawAllText () {ctx.clearrect (0, 0, Cavheigth, Cavheight) в соответствии с атрибутами объекта (for (for var i = 0, len = capobjs. Length; i <len; i ++) {ctx.fillstyle = capobjs [i] .color ctx.font = bold 20px courier new ctx.filltext (capobjs [ I] .content, ca pobjs [i] .left, capobjs [i] .top) ctx.closepath () capobjs [i] .moving () // if (capobjs [i] .left < - cavwidth) {// capobjs.splice (i, 1) / /Если вы превзошли это оператор, будет ошибочно, потому что его элемент в массиве - null // Решение: Напишите новую функцию, чтобы обновить массив //}} // Обновить массив, объект уже супер супер супер удалить это из массива, когда он выходит функция объекта rebreshobjs (objs) {for (var i = objs.length -1; i> = 0; i-) {if (ibjs [i]. -cavwidth ||. [i] .time) if (nowitemtime == сейчас) {// Первая высота управления контроля была недостаточной, а затем пути пространства в CentoPvalue // var nowitemleft = getleftValue (testarray [i]) // var Difftime = math.abs (nowitemtime -lastitemtime) // if (difftime <6) {// capheight += 30 // caph восьми = capheight> 400? colorindex] varge temcap = new Подпись (testarray [i] .smove, temcolor, testarray [i] .content)) capobjs [capobjs.length- 1] .setid () temcap = null testarray.splice (i, 1)}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} // Когда пользователь нажимает функцию обратного вызова SendCaption (Argiry) {var inputeTelet = inputele.value var w = parseint (video .currenttime) var inputishovalue = ismoveinputele.cecked var temobj = {content: time: ismove ismove. : Inputishovalue, colororIndex: s alectedColorIndex} testarray.push (temobj) input.value =} // function getleftvalue (obj) {// if (obj.ismove) {// return 0 //} // ense {// var contactLength = obj.content.length // var notemleft = 420 -contentLength * 9 // return nwyited //} //} ///} // перезагрузить Canvas, чтобы изменить функцию ineritcav (аргумент) {// testarray copyRary (testaraycopy , Testarray) capheight = 0 0 0 clearInterval (canvastimer) canvastimer = null initcanvas ()} var canvastimer = null // инициализировать Canvas, при запуске воспроизведения, функция инициировала initcanvas () {if (canvastimer == nul SetInterval (аргумент) {drailAllText () updateArrr ay () rewreshobjs (capobjs)}, 10)}} // end function initCanvas // Скопировать функцию массивы (arr1, arr2) {for (var i = 0, len = arr1 .Length; Случай 2: PreviseSelectiDemid = Colororitemthrid Break; = var EventTarget = E.Target EventTarget.ClassName = SelectColor var evetarid = eventTarget.substring (9) Switch (Evetarid) {case frist: Selectcolorinde x = 0 Break; ; }) // Прогрессивная полоса изменяет код выполнения video.addeventListener (timeUpdate, function () {var nowplaytime = video.currenttime var diftime = math.abs (nowplaytime-s me) prevplaytime = nowplaytime if (difftime> 1) {reinitcav ( )}}, False) // Видео приостановка кода выполнения video.addeventListener (pause, function () {clearInterval (canvastimer) canvastimer = null}) ck, sendcaption) // Ввод Введите мониторинг инцидента intaindele.addeventlistener (keydown, function (функция (функция (функция (функция (функция (функция) // Ввод E) {var keynum = 0 keynum = window.event? /Функция b (aaaa) {// return aaaa () //} // b ()} // end})Я надеюсь, что смогу помочь студентам, которые хотят сделать заграждение, вы также можете перейти в GitHub, чтобы загрузить полный код проекта: адрес проекта GitBub
Выше всего содержимое этой статьи.