في الآونة الأخيرة ، تحتاج إلى إنشاء لاعب وابل عندما تقوم بواجب كبير. لقد تذكرت الكود المصدري للآخرين وأعيد توحيده ، والمظاهرة هي كما يلي
الوظيفة الرئيسية هيإناء
اضبط اللون والسرعة ونوع الوابل
عرض وابل
عيوب معروفة:لا يمكن شاشة ملء الشاشة
القماش لا يتكيف مع التكيف
لا يوجد تحكم مخصص لاعب
لا يتم عرض الوابل المقابل وفقًا لوقت التشغيل
لا يمكن تعليق الوابل
سيتم تحسين العيوب المعروفة في المستقبل. رمز المصدر لمشغل الوابل الذي يمكن العثور عليه على الإنترنت بشكل عام يجعل الوابل المتداول فقط بدون وابل ثابت.
القماش يرسم تأثير النص والنص على النصجوهر اللاعب بأكمله هو رسم الرسوم المتحركة للرسوم المتحركة.
أضف أولاً علامات الفيديو وكابلات القماش في ملفات HTML
<div id = barrageplayer> <canvas id = cv_video width = 900px height = 450px> </tanvas> <video id = v_video src = test.mp4 controls = video/mp4>/video> </viv>
قم بتعيين نمط الموضع لعلامة القماش على إيجابي: يتم تداخل الفيديو واللوحة معًا. ثم أضف محتوى الوابل إلى قماش.
var c = document.getElementByid (cv_video) ؛ ؛ ، spey) {this.content = if (this.type == static top) {this.head = parseint ((c_height/2) -Math.Random ()*c_height/2) +10 ؛} els .hight = parseint ((c_height/2) +math.random ()*c_height/2) +10 ؛} if (typeof this.move! = function) {barrage.prototy.move. اكتب == افتراضي) {this.left = this.left-this.speed ؛}}}}يهيئة كائن الوابل المبني مع المعلمات المختلفة ، بما في ذلك المحتوى واللون وأنواع الحركة والسرعة ، وتحديد طريقة MOVE () للتحكم طريقة اليسار إلى اليسار
بعد اكتمال مُنشئ كائن الوارش ، يتم إدخال السمة ، وإنتاج الرسوم المتحركة ، مباشرة على الرمز
// الدوائر والقماش لتحقيق setInterval تأثير الرسوم المتحركة (function () {ctx.clearrect (0،0 ، c_width ، c_height) ؛ ctx.save () ؛ for (var i = 0 ؛ i <msgs.length ؛ i + i + +) {) {) {if (msgs [i]! = null) {if (msgs [i] .type == default) {handledefault (msgs [i]) ؛} آخر {handlestate (msgs [i]) ؛ }}}} ، 20)تنفيذها كل 20 مللي ثانية ، ctx.clearrct (0،0 ، c_width ، c_height) ؛ قائمة الوابل ، عند إرسال وابل ، ستتم إضافة مثيل باراج إلى القائمة) ، ثم تتم معالجتها بشكل منفصل وفقًا لابل من النمط الافتراضي أو النمط الثابت. إذا كان هذا هو الوابل الافتراضي ، فسيتم معالجته وفقًا للطرق التالية
// معالجة دالة نمط الوابل الافتراضية handledefault (barrage) {if (barrage.left == undefined || barrage.left == null) {barrage.left = c.width ؛} آخر (Barrag E.Left <-200) {barrage = null ؛} آخر {barrage.move () ctx.fillstyle = barrage.color ؛بادئ ذي بدء ، إذا لم يتم تعيين مثيل الباراج على السمة اليسرى ، فسيتم إعطاء عرض القماش لها. من مثيل barrage لتغيير قيمة السمة اليسرى ثم قم بتعيين لون النص ، واكتب نصًا جديدًا في المستوى الأول ، واستعادة القماش. هذا يكمل إطار الرسوم المتحركة.
طريقة تنفيذ الوابل الثابت هي كما يلي
// علاج وظائف الباراج الثابتة (barrage) {ctx.moveto ( 2. barrage.hight) ؛ (xt (، c_width/2 ، barrage.height) ؛ barrage = null ؛ // ctx. store () ؛ ؛بادئ ذي بدء ، يتم نقل النقطة الأساسية للقماش إلى مركز القماش. لهذا القماش. ثم قم بتعيين محاذاة النص على المحاذاة الأوسط ، وتعيين نمط النص ، وملء النص. نظرًا لأن الوابل ثابت ، فليس هناك حاجة إلى التباطؤ ، لكن الوابل الثابت سيختفي أيضًا. من أجل عدم احتلال السمات الإضافية هنا ، نستخدم السمة اليسرى مباشرة كموقف شعار ، مما يقلل أيضًا من السمة اليسرى. وبهذه الطريقة ، تتحقق معالجة الوابل الثابت.
يجب أن يكون من السهل إتقانه الأشخاص الآخرين الذين لديهم أساس معين حول اللون والأناقة.
لخصيستخدم هذا المشروع بشكل أساسي للرسم النصي والرسوم المتحركة البطيئة للنص.
canvasdom.getConotext () canvas.save () /canvas.restore () canvas.clearrect () canvas.moveto ()
اتضح أنه لا يمكنني فهمه باستخدام Save () و Restore (). قبل تعديل حالة القماش. مثل عندما أتعامل مع الوابل الثابت ، تم تغيير النقطة الأساسية للقماش ، وبالتالي فإن طريقة التخليص في اللوحة الأصلية لم تعد قابلة للتطبيق على اللوحة الحالية. ثم العودة إلى اللوحة الأصلية.
رمز التشغيل
<! uaa -contermable = ie = title> وثيقة </title> </head> text/css>. inline-black ؛} #white {background: white ؛} #Red {background: #ff6666 ؛} #yellow {background: #ffff00 ؛} #blue { #33399 ؛} #green {background: #339933 ؛} #cv_video { الموقف: Z-index: 1 ؛ ؛} </style> <body> <div id = barrageplayer> <mvas id = cv_video width = 900px height = 450px> </tanvas> <video id = v_video src = test .mp4 controls type = video/mp4> </ video> </viv> <div id = barrageInput> <viv> <type type = text id = smsg placeholder = الرجاء إدخال محتوى الوارغ/> <button id = send> </button> </viv> <div id = colorpick> <div class = pickdiv id = white> </viv> <div class = pickdiv id = red> </viv> <div class = pickdiv id = yellow> </viv> </viv> div class = pickdiv id = Blue> </viv> <div class = pickdiv id = green> </viv> </viv> <div id = typepick> <input type = radio name = type = defaul t> = type value = static top> static top <input type = radio name = type value = static bottom> bottom static </fire> <div id = speedpick> <type type = radio name = speed value = 1> 1x <type type = اسم الراديو = قيمة السرعة = 2> 2x <type type = radio name = speed value = 3> 3x </fire> <div id = stylepick> </viv> <script> var c = document.getElementById (cv_video) ؛ var typedom 1 نوع var ؛ Addeventristener ("انقر" ، {switch.target.id) color =#339933 ؛ الطول ؛ Speeddom [i] ؛} // وظيفة قطع الراديو // كائن barrage (المحتوى ، النوع ، السرعة) {this.content = content ؛ = السرعة ؛ if (this.type == افتراضي) parseint ((C_Height/2) -Math.Random ()* (). Speed ؛}} // Circle the Canvas of the Animation Effect SetInterval ؛؛ null) {if (msgs [i] .type == default) {handledefault (msgs [msgs [i]) ؛} آخر {handlestatic (msgs [i]) ؛}} ، 20) // معالجة نمط الوادي الافتراضي الافتراضي وظيفة handledefault (barrage) {if (barrage.left == undefined || barrage.left == null) {barrage.left = آخر {barrage.move () ctx.fillstyle = barrage.color ؛ {ctx.moveto (c_width/2 ، barrage.height) ؛ اليسار == غير محدد || = null ؛ما سبق هو HTML الذي قدمه المحرر لك لاستخدام Canvas لتنفيذ وظيفة الواردة. شكرا جزيلا لدعمكم لموقع VEVB Wulin!