最近、私は弾幕ビデオのウェブサイトの開発を開始し、HTML5のキャンバスを介して弾幕の機能を達成しました。
それからゴシップについて話さないでください、最初に考えることについて話しましょう。
アイデア：ページレイアウトから、ビデオタグによって生成されたビデオウィンドウ上のキャンバスをカバーし、絶対的な位置で実現できます。最も重要なのは、JSコントロールキャンバスの弾幕の表示です。そして、弾幕は弾幕です。弾幕オブジェクトには、次の方法が含まれます。弾幕の水平方向の垂直座標、弾幕の動き。実装の原則は、リスニングビデオが再生されるイベントであり、タイマーが開始すると、オブジェクトの属性に応じて描画されます弾幕のコード、タイマーには弾丸アレイを更新するためのコードもあります。
下の写真は、弾幕効果のスクリーンショットです
次に、コードを直接起動します。
（function（）{window.onload = function（）{var video = document.getelementsbytagname（video）[0] var cav = document.getelementsbytagname（canvas）[0] //定数キャンバスの高さと幅を設定しますvar cavwidth = 800 var cavheight = 420 cav.width = cavwidth cav.height = cavheight var ctx = cav.getContext（2d）//ストレージ弾幕オブジェクトvar capobjs = [] var lastitemtime var 8 = 20 var inputele = document.getelementsbyclassname （caption -input-text）[0] var sendele = document.getelementsbyclassname（caption-sendbutton）[0] var colorm = document.getelementsbyclassname（coloritems）[0] ar ismoveinputele = document.getelementsbyclassname（caption-input-ismove）[ 0] //弾幕色のvar色= [＃fff、＃ccffcc、＃ccccff、＃ccfffff] var selectcolorindex = 0 var prevplaytime = 0 // y = [] var capobjid = 0 // Canvasのカナダの銀河の配列varitobjs = [{blank：true、value：20、index：0}、{blank：true、value：50、index：1}、{blank：true、value： 80、index：2}、{blank：true、value：110、index：3}、{blank：true、value：140、index：4}、{blank：true、value：170、index：5}、{空白：true、value：200、index：6}、{blank：true、value：230、index：7}、{blank：true、value：260、index：8}、{blank：true、value：290、 index：9}、{blank：true、value：320、index：10}、{blank：true、value：350、index：11}、{blank：true、value：380、index：12}、{{{{{{{空白：true、value：410、index：13}] //テストデータテストデータvar testarray = [{content：abcdefghijklmnopqrstuvwxyz、time：1、ismove：colorindex：0}、{conne、Tent：23333333333333333333、時間： 2、ismove：true、colorindex：0}、{content：dry、hahaha ~~~~~~、time：2、ismove：true、colorIndex：5}、{content：dry、hahaha ~~~~~~~~~~~~~ 2、ismove：true、colorindex：4}、{content：dry toast、hahaha ~~~~~~、time：2、ismove：true、colorindex：4}、{content：dry toast、hahaha ~~~ ~~ ~~ 〜、time：2、ismove：true、colorindex：0}、{content：dry toast、hahaha ~~~~~、time：2、ismove：true、colorindex：0}、{content：2333333333333333、時間：3、 ismove：true、colorindex：0}、{content：233333333333333333、time：3、ismove：true、colorindex：0}、{content：233333333333333333333、時間：3、ismove：t：t rue、colorindex：0} ：2333333333333333、時間：3、ismove：true、colorindex：0}、{content：23333333333、time：3、ismove：true、colorindex：0}、{content：233333333333333333333333、時間： 0}、{content：233333333333333、time：4、ismove：false、colorindex：0}、{co ntent：233333333333333、時間：5、ismove：truex：4}、{conference：{Conference：23333333333333、6：6： ismove：true、colorindex：2}、{content：23333333333333333、time：7、ismove：true、colorindex：2}、{content：23333333333333333、時間：7、ismove：true、coloririndex：2}、{content：23333333333333時間：7、ismove：true、colorindex：2}、{content：233333333333333、time：7、ismov e：true、colorindex：2}、{content：23333333333333333、time：7、ismove：true：true、colorindex：2 }、{content：23333333333333、time：7、ismove：true、colorIndex：2}、{content：2333333333333、時間：8、ismove：true、colorindex：0}、{content：23333333333333333、time：9、ism ove： true、colorindex：0}、{content：2333333333333333、time：10、ismove：true、colorindex：0}、{content：先生は非常によく言いました、私は一生懸命勉強したい」、私は：12、ismove： true、colorindex：0}、{content：老师说的非常好、我要好好学习了》》》》、time：13、ismove：true、colorindex：0}、{content：老师说的非常好、我要好好学习了》》》》、時間：14、ismove：true、colorindex：2}、{content：先生は非常によく言った、私は一生懸命勉強したい "" "" ""、is：15、ismove：false、 colorIndex：0}、{content：teacher：teacherは非常によく言った、私は一生懸命勉強したい "" "" "" "" "、16、ismove：true、colorindex：2}、{content：先生はとてもよく言って欲しい"" "" "" ""、ismove：true、colorindex：3}、{content：先生は非常によく言った、私は一生懸命勉強したい "" ""、 "、time：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: true: true ：true：true、colorindex：3}、{content：先生は非常によく言った、私は一生懸命勉強したい "" "" ""、time：21、ismove：true、colorindex：0}、{会議：先生は言った。とてもよく、私は元気になりたいです、私は勉強したいです "" "" ""、time：22、ismove：true、colorindex：0}、{content：old Iron、小さな贈り物は波を取りました小さなロケットがブラシ========================= ISMOVE：true、colorIndex：0}、{content：古い鉄、小さな贈り物は波をとった、小さなロケットはブラシ==== ============== : true, colorindex: 0}, {content: old iron, small gifts have taken a wave, small car rockets brush up =======, time: 25、ismove：true、colorindex：3：3}、{content：old Iron、小さな贈り物は波をとっています。 ColorIndex：0}、{content：old：old Iron、小さな贈り物は波をとっています。車の小さなロケットは磨かれています============ 、{コンテンツ：古い鉄、小さな贈り物は波、小さな車のロケットブラシit ============================================================ =========================================================== =========================================================== ========================= =車は車です、車は車です、車はブラシの小さなロケット===================================== =========================================================== =========================================================== ======================================================================================== =、time：30、ismove：true、colorIndex：5}、{content：content：classの直後に、varo lanが上昇します~~~、time：31、ismove：true、colorindex：5}、{content：ime imすぐにクラスに行くと、Varo Blue Continentが起きています。時間：33、ismove：true、colorindex：2}、{content：classの直後に、ヴァロブルーコンチネンタルが上昇します~~~、時間：33、ismove：true、colorindex：5}、{content：それはクラスの正しいですアウェイ、そしてヴァロ・ランは去りました。 Ismove：true、colorindex：2}、{content：content：conter：classの直後に、ヴァロラン本土が登場しました~~~、時間：37、ismove：true、colorindex：2}] //テストデータをバック、testaraycopy） /*バーバイトオブジェクト、パラメーター、パラメーター、パラメーターは次のとおりです。 .text：弾幕のテキスト* / /*プロトタイプチェーンメソッドSettopValue垂直座標を設定し、SetLeftValueが水平座標を設定し、移動は座標の変更を完了し、ID値設定を完了します* / function Capption（ismove、spe、 col、this.ismove = ismove = spe this.color = col || .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 .length; i ++） .prototype.setLeftValue = function（）{if（this.is.is.isis move）{this.left = cavwidth} else {var contentlength = this.content.length var nowitemleft = 420 -contentlength * 9 this.left = nowItemleft}} chopveer = function（）{if（this.ismove）{this.left- = this.speed if（this.left + width <cavwidth && accuppos）{this.occupypos = false topobjs [this。 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、cavheight、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 //ソリューションに障害がある場合、解決策は次のとおりです。既にスーパースーパースーパースーパー削除を配列から削除します。オブジェクト関数reshobjs（objs）{for（var i = objs.length -1; i> = 0; i-）{if（ibjs [i] .let < -cavwidth || [i] .time）if（nowitemtime == now）{//コントロールの最初のコントロールの高さは十分ではありませんでした。 difftime = math.abs（nowitemtime -lastitemtime）// if（difftime <6）{// capheight += 30 // caph 8 = capheight> 400？ colorIndex] varge temcap = new 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 = {content：inputeletxt、time：now：ismove ：intecismovalue、colororindex：s ElectedColorindex} testarray.push（temobj）inputle.value =} //関数getLeftValue（// if（obj.ismove）{// return 0 //} // else {// var {// return contactLength = obj.content.length // var notemleft = 420 -contentlength * 9 // return nowited //} //} // // restart canvas rething copyarray（testarycopy（testareaycopy）を変更する、testarray）capheight = 0 0 0 clearinterval（canvastimer）canvastimer = null initcanvas（）} var canvastimer = null // canvasを初期化します。 setInterval（argument）{drawalltext（）updatearrr ay（）refrecobjs（capobjs）}、10）} // end function initcanvas // array function copyarray（arr1、arr2）{for（var i = 0、len = arr1 .length; i ++）{arr2 [i]}ケース2：PrevSelectemthridブレーク3：PrevSeectemfourth Break：Prevselectidid = ColororItemfififth Break = var eventTarget = e.target eventtarget.classname = selectcolor var evetarid = eventtarget（9）switch（evetarid）{case frist：selectedcolorinde x = 0 break：selectedcolorindex = 1 bread; ;ケース4：SelectedColoririndex = 3つのブレーク= 4つのブレーク：SelectColorIndex = 5 break;}} bide }）//プログレッシブストリップは実行コードVideo.addeventListener（timeupdate、function（）{var nowplaytime = video.currenttime var difime = math.abs（nowplaytime-s-me）prevaytime = nowplaytime if（difftime> 1）{renitcav（ ）}}、false）//実行コードのビデオ停止Video.AddeventListener（Pause、function（）{clearinterval（canvastimer）canvastimer = null}）ck、sendcaption）//入力監視インシデントinputdele.addeventlistener（keydown、function（function（function）Enter Enter e）{var keynum = 0 keynum = window.event：e. e. e. keynum == 13）{sendcaption（）}}）var aaaa = function（）{alert（1）} aaaa（） / /function b（aaaa）{// return aaaa（）//} // b（）} // end}））弾幕を作りたい学生を支援できることを願っています。Githubにアクセスして、完全なプロジェクトコード：GitBub Projectアドレスをダウンロードすることもできます。
上記は、この記事のすべての内容です。