في الآونة الأخيرة ، بدأت في تطوير مواقع الفيديو بالفيديو ، وحققت وظيفة الوابل من خلال قماش في HTML5.
ثم لا تتحدث عن القيل والقال ، دعنا نتحدث عن التفكير أولاً.
الفكرة: من تخطيط الصفحة ، يغطي قماشًا على نافذة الفيديو التي تم إنشاؤها بواسطة علامة الفيديو ، ويمكن تحقيقها مع تحديد المواقع المطلقة. أهم شيء هو عرض الوابل على قماش التحكم في JS. والرابل هو النص. يشمل كائن الوارش أساليب: تعيين الإحداثيات الرأسية الأفقية للوابل ، حركة الوابل. مبدأ التنفيذ هو الحدث الذي يبدأ فيه فيديو الاستماع ، ويتم إنشاء جهاز توقيت عندما يبدأ الموقت. رمز الوابل ، يحتوي المؤقت أيضًا على رمز لتحديث مجموعة الرصاص.
الصورة أدناه هي لقطة شاشة لتأثير الوابل
ثم ابدأ الرمز مباشرة:
(function () {window.onload = function () {var video = document.getElementsByTagName (video) [0] var cav = document.getelementsbytagname (canvas) [0] = 800 var cavheight = 420 cav.width = cavwidth cav.height = cavheight var ctx = cav.getContext (2d) (Caption -input-Text) [0] var sendele = document.getElementsByClassName (Caption-SendButton) [0] var colorm = document.getElementsByClassName (colorItems) [0] ar iSmoveInputele = document.getElementSbyClassName (input-input-lismove) [ 0]. // مجموعة التنوع في كندا في القماش المتغير = [{blank: true ، value: 20 ، index: 0} ، {blank: true ، value: 50 ، index: 1} ، {blank: true ، value: 80 ، الفهرس: 2} ، {فارغ: صواب ، القيمة: 110 ، الفهرس: 3} ، {فارغ: صواب ، القيمة: 140 ، الفهرس: 4} ، {فارغ: صواب ، القيمة: 170 ، الفهرس: 5} ، { فارغة: صواب ، القيمة: 200 ، الفهرس: 6} ، {فارغ: صواب ، القيمة: 230 ، الفهرس: 7} ، {فارغ: صواب ، القيمة: 260 ، الفهرس: 8} ، {فارغ: صواب ، القيمة: 290 ، الفهرس: 9} ، {فارغ: صواب ، القيمة: 320 ، الفهرس: 10} ، {فارغ: صواب ، القيمة: 350 ، الفهرس: 11} ، {فارغ: صواب ، القيمة: 380 ، الفهرس: 12} ، {{{{ فارغة: صواب ، القيمة: 410 ، الفهرس: 13}] // اختبار بيانات اختبار البيانات var testarray = [{المحتوى: abcdefghijklmnopqrstuvwxyz ، الوقت: 1 ، iSmove: false ، colorindex: 0} ، {conne ، tent: 2333333333333 ، time: time: 2 ، Ismove: True ، ColorIndex: 0} ، {content: dry ، hahaha ~~~~~~ ، الوقت: 2 ، Ismove: True ، ColorIndex: 5} ، {content: dry ، hahaha ~~~~~ time: 2 ، Ismove: True ، ColorIndex: 4} ، {content: toast dry ، hahaha ~~~~~~ ، time: 2 ، ismove: true ، colorindex: 4} ، {content: dry toast ، hahaha ~~~ ~ ~ ~ ، الوقت: 2 ، Ismove: True ، ColorIndex: 0} ، {content: toast dry ، hahaha ~~~~~ ، time: 2 ، ismove: true ، colorIndex: 0} ، {content: 233333333333333333333333333333333333333333333333333333333333333333. Ismove: True ، ColorIndex: 0} ، {content: 2333333333333333333333 ، الوقت: 3 ، Ismove: True ، ColorIndex: 0} ، {content: 2333333333333 ، time: 3 ، ismove: t rue ، colorindex: 0} ، { : 2333333333333333333 ، الوقت: 3 ، Ismove: True ، ColorIndex: 0} ، {content: 233333333 ، time: 3 ، ismove: true ، colorindex: 0} ، {content: 23333333333333333333333333333333333333333333333333333 ، time: 3 ، ismove: true ، colorindex: 0} ، {content: 2333333333333333333333333 ، الوقت: 4 ، Ismove: false ، colorindex: 0} ، {co ntent: 23333333333333 ، الوقت: 5 ، Ismove: truex: 4} ، Ismove: True ، ColorIndex: 2} ، {content: 233333333333333333333 ، الوقت: 7 ، Ismove: True ، ColorIndex: 2} ، {content: 233333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333331ance الوقت: 7 ، Ismove: True ، ColorIndex: 2} ، {المحتوى: 23333333333333 ، الوقت: 7 ، Ismov E: True ، ColorIndex: 2} ، {content: 23333333333333333 ، time: ismove: true ، colorindex: 2 } ، {content: 2333333333333333333333 ، الوقت: 7 ، Ismove: True ، colorindex: 2} ، {content: 23333333333333 ، time: 8 ، Ismove: true ، colorindex: 0} ، {content: 23333333333333 ، time: ive ove: صحيح ، ColorIndex: 0} ، {المحتوى: 233333333333333 ، الوقت: 10 ، Ismove: صحيح ، colorindex: 0} ، {المحتوى: قال المعلم جيدًا ، أريد أن أدرس بجد "،" "، هو: 12 ، Ismove: صحيح ، colorIndex: 0} ، {content: 老师说的非常好 ， 我要好好学习了》》》》 ، الوقت: 13 ، Ismove: true ، colorindex: 0} ، {content: 老师说的非常好 ， 我要好好学习了》》》》 ، الوقت: 14 ، Ismove: True ، ColorIndex: 2} ، {المحتوى: قال المعلم جيدًا ، أريد أن أدرس بجد "" "" "، IS: 15 ، Ismove: false ، ColorIndex: 0} ، {المحتوى: المعلم: قال المعلم جيدًا ، أريد أن أدرس بجد "" "" "" ، 16 ، Ismove: True ، ColorIndex: 2} ، {content: قال المعلم جيدًا ، أريد لدراسة "" "" ، Ismove: True ، ColorIndex: 3} ، {المحتوى: قال المعلم جيدًا ، أريد أن أدرس بجد "" "" ، الوقت: 18 ، Ismove: True ، ColorIndex: 2} ، {المحتوى: قال المعلم جيدًا ، أريد أن أدرس بجد "" "" ، الوقت: 19 ، Ismove: True ، ColorIndex: 0} ، {content: قال المعلم جيدًا ، أريد أن أدرس جيدًا "" "" "" ، 20 ، Ismove: True: True: True: True: True: True: True: True: True: True: True: True: True: True: True: True: True: True: True: True : صواب: صحيح ، colorIndex: 3} ، {المحتوى: قال المعلم جيدًا ، أريد أن أدرس بجد "" "" "" ، الوقت: 21 ، Ismove: true ، colorindex: 0} ، {المؤتمر: قال المعلم حسنًا ، أريد أن أكون جيدًا ، أريد أن أكون جيدًا. يتم تفريغ صاروخ صغير =========== ، الوقت: 23 ، Ismove: True ، ColorIndex: 0} ، {Content: Old Iron ، لقد أخذت الهدايا الصغيرة موجة ، يتم تفريغ الصواريخ الصغيرة ==== ================: True ، ColorIndex: 0} ، {Content: Old Iron ، لقد أخذت الهدايا الصغيرة موجة ، فرشاة Rockets صغيرة للسيارة ========= ، الوقت: 25 ، Ismove: True ، ColorIndex: 3: 3} ، {content: Old Iron ، لقد أخذت الهدايا الصغيرة موجة ، يتم تفريغ الصواريخ الصغيرة ========= ، الوقت: 26 ، Ismove: True ، ColorIndex: 0} ، {content: Old: Old Iron ، Gifts الصغيرة قد أخذت موجة ، يتم تفريغ الصواريخ الصغيرة للسيارة ========== ، الوقت: 27 ، Ismove: True ، ColorIndex: 5} ، {المحتوى: الحديد القديم ، الهدايا الصغيرة ، إنها موجة ، فرشاة صاروخ السيارة الصغيرة ================================ ================================================== ================================================== ================ ، Ismove: خطأ: 5} ، {المحتوى: الحديد القديم ، أخذت الهدايا الصغيرة موجة ، السيارة هي السيارة ، السيارة هي السيارة ، السيارة هي السيارة ، السيارة هي السيارة ، والسيارة هي الصواريخ الصغيرة التي تفرشها ================================= ================================================== ================================================== ===================================== ، Ismove: Trutex's Old Rocketing ========= = ، الوقت: 30 ، Ismove: True ، ColorIndex: 5} ، {content: مباشرة بعد الفصل ، فإن Varo Lan تتراجع ~~~ ، الوقت: 31 ، Ismove: True ، ColorIndex: 5} ، {content: أنا الذهاب إلى الفصول الدراسية على الفور ، قارة Varo Blue تستيقظ ~~~ ، الوقت: 32 ، Ismove: True ، ColorIndex: 2} ، {Content: مباشرة بعد الفصل ، ترتفع قارة Varo Blue. الوقت: 33 ، Ismove: True ، ColorIndex: 2} ، {content: مباشرة بعد الفئة ، Varo Blue Continental تصل إلى ~~~ ، الوقت: 33 ، Ismove: True ، ColorIndex: 5} ، {content: إنه خارج الفئة اليمين بعيدًا ، وذهب Varo Lan. Ismove: True ، ColorIndex: 2} ، {content: على الفور: مباشرة بعد الفصل ، جاء Varo Lan Perfer ، testaraycopy) /*كائنات باربايت ، المعلمات ، المعلمات ، المعلمات هي: 1.ismove: ما إذا كان الوابل هو الوابل المتنقل ، 2.SPE: سرعة حركة الوابل ، 3. كول: لون الوابل ، 4 .Text: نص سلسلة سلسلة* / /*النموذج الأولي ، يقوم SettoPvalue بتعيين الإحداثيات العمودية ، ويقوم SetLeftValue بتعيين الإحداثي الأفقي ، ويكمل الحركة تغيير الإحداثيات ، ويكمل Setid إعداد قيمة المعرف* / وظيفة الوظيفة (Ismove ، SPE ، Col ، text) {this.ismove = ismove this. .topIndex = 0 this.occupypos = true this.top = 300 this.left = 0 this .setValue () this.settopvalue ()} caption.prototype.settopvalue = function () {for (var i = 0 ، len = topobjs .lender ؛ .prototype.setleftvalue = function () {if (this.is.is.is.is move) {this.left = cavwidth} آخر {var contentLength = this.content.length var nowitemleft = 420 -ContentLength * 9 this.left = nowiteMleft}} caption. 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 () // Circle the Array and draw the function spalltext () {ctx.clearrect (0 ، 0 ، cavheight ، cavheight) وفقًا لسمات الكائن (لـ (for (for var i = 0 ، len = capobjs. length ؛ i <len ؛ i ++) {ctx.fillstyle = capobjs [i] i] capobjs.splice (i ، 1) / /إذا كان هذا البيان ، هل سيكون لديك خطأ لأن العنصر في صفيف هو الحل الفارغ // هو بالفعل Super Super Super Super Super Delete من صفيف عندما يخرج من وظيفة الكائن refreshOBJS (objs) {for (var i = objs.length -1 ؛ i> = 0 ؛ i-) {if (ibjs [i] -cavwidth ||. [i] difftime = math.abs (nowitemtime -lastitemtime) // if (difftime <6) {// capheight += 30 // caph eight = capheight> 400؟ ColorIndex] varge temcap = caption جديد (testarray [i] .smove ، temcolor ، testarray [i] .Content)) capobjs [capobjs.length- 1] .setid () temcap = null testarray.splice (i ، 1)}}} // عندما ينقر المستخدم على وظيفة رد الاتصال من SendCaption (الوسيطة) {var inputeletxt = inputele.value var w = parseint (video .currenttime) var inputismovalue = isMoveInputele.checked var temobj = : inputismovalue ، colororIndex: S electedColorIndex} testarray.push (temobj) inputle.value =} // function getleftvalue (obj) {// if (obj.ismove) {// return 0 //} // else {//var contactlength = obj.content.length // var normleft = 420 -ContentLength * 9 // return nowited //} //} ///} // أعد تشغيل القماش لتغيير وظيفة reinitcav (وسيطة) {// testarray copyarray (testaraycopyy ، TestArray) capheight = 0 0 0 ClearInterval (canvastimer) canvastimer = null initcanvas ()} var canvastimer = null // تهيئة القماش ، عند البدء في اللعب ، بدأت الوظيفة initcanvas () {if (canvastimer == null) {canvastimer = setInterval (وسيطة) {dulltext () updatearrr ay () refreshobjs (capobjs)} ، 10)}} // end function initcanvas // copy the Array function copyarray (arr1 ، arr2) {for (var i = 0 ، len = arr1 . الطول ؛ الحالة 2: حالة الفوضى ؛ = var eventTarget = E.Target EventTarget.ClassName = SelectColor var evetarid = EventTarget.SubString (9) Switch (evetarid) {case frist: selectColorinde x = 0 case. ؛ }). ))}} ، خطأ) // تعليق الفيديو من رمز التنفيذ video.addeventListener (الإيقاف المؤقت ، الدالة () {clearinterval (canvastimer) canvastimer = null}) ck ، sendCaption) e) {var keynum = 0 keynum = window.event؟ /الوظيفة B (AAAA) {// return aaaa () //} // b ()} // end})آمل أن أكون قادرًا على مساعدة الطلاب الذين يرغبون في إنشاء وابل ، يمكنك أيضًا الانتقال إلى Github لتنزيل رمز المشروع الكامل: عنوان مشروع GITBUB
ما سبق هو كل محتويات هذا المقال.