最近、大きな宿題をしているときに弾幕プレーヤーを作る必要があります。私は他の人のソースコードを覚えており、実現したものを再現しました、そしてデモンストレーションは次のとおりです
主な機能はです容器
弾幕の色、速度、タイプを設定します
弾幕を表示します
既知の欠陥：フル画面はできません
キャンバスは適応に適応しません
カスタムプレーヤーコントロールはありません
対応する弾幕は再生時間に従って表示されません
弾幕を停止することはできません
既知の欠陥は将来改善されます。インターネット上で見つけることができる弾幕プレーヤーのソースコードは、一般的に静的弾幕のないローリング弾幕のみを行います。
キャンバスはテキストとテキストのローリング効果を描きますプレーヤー全体のコアは、テキストを導くことです。
最初にHTMLファイルにビデオビデオタグとキャンバスケーブルを追加する
<div id = rarageplayer> <canvas id = cv_video width = 900px height = 450px> </canvas> <video id = v_video src = test.mp4 controls = video/mp4>/video> </div>
キャンバスタグの位置スタイルをポジティブに設定します。それは、ビデオとキャンバスが弾薬プレーヤーのようにオーバーラップされます。次に、弾幕のコンテンツを最初に追加し、キャンバスの関連情報を取得し、キャンバスのフォントサイズとフォントスタイルを設定します。
var c = document.getelementbyid（cv_video）; ;キャンバス情報が取得されており、賢い女性は米を使用して調理するのが難しいです。 、spey）{this.conter.color = thipe = speed = speed; 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（thipof this.move！= function）{barrage.prototype.move（） type == default）{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 + 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）;弾幕リスト、弾幕が送信されると、弾幕インスタンスがリストに追加され、デフォルトスタイルまたは静的スタイルの弾幕に従って個別に処理されます。デフォルトのスタイルの弾幕の場合、次の方法に従って処理されます
//デフォルトの弾幕スタイル関数処理処理エフォルト（弾幕）{if（barrage.left == undefined || barrage.left == null）{Barrage.left = c.width;} else（barrag e.left <-200） {Barrage = null;} else {Barrage.move（）ctx.fillstyle = barrage.color;まず、弾幕インスタンスが左属性を設定しない場合、弾薬インスタンスがキャンバスにエクスポートされた場合、キャンバスの幅が与えられます。左の属性の値を変更するための弾幕インスタンスの次に、テキストの色を設定し、最初のレベルで新しいテキストを書き、キャンバスを復元します。これにより、アニメーションのフレームが完成します。
静的弾幕の実装方法は次のとおりです
//静的弾薬スタイル関数（弾幕）{ctx.moveto（c_width.height）; 2。Barrage.height） （xt（、c_width/2、rarage.height）; Barrage = null; //ctx。Store（）; ctx.ClearRect（0,0、c_width、c_height）;} ;まず、キャンバスのベースポイントは、キャンバスの中心に移動する必要があります。このキャンバスに。次に、テキストアラインメントを中央のアライメントに設定し、テキストスタイルを設定し、テキストに記入します。弾幕は静的であるため、速度を落とす必要はありませんが、静的弾幕も消えてしまう必要があります。ここで追加の属性を占有しないために、左の属性を直接使用します。これは左属性も減少します。このようにして、静的弾幕の処理が実現されます。
色とスタイルの設定について特定の基盤を持っている他の人々は、ここでそれを紹介して、それを理解してはいけません。
要約しますこのプロジェクトは、主にテキストの描画とテキストの遅いアニメーションに使用されます
canvasdom.getConotext（）canvas.save（）/canvas.restore（）canvas.clearrect（）canvas.moveto（）
save（）とrestore（）で理解できないことがわかりました。キャンバス状態を変更する前に、キャンバス状態を切り替え、作業が完了した後も続きます。静的弾幕を処理すると、キャンバスのベースポイントが変更されているため、元のキャンバスのクリアランス方法は、現在のキャンバスでのみ別の除去方法を使用しています。次に、元のキャンバスに戻ります。
実行コード
< UAA -Compatible Content = IE = Edge> <title>ドキュメント> </head> <text/css>。 inline-black;} #white {background：white;} #red {background：＃ff6666;} #yellow {background：＃ffff00;} #blue {＃333399;} #green {background：＃339933;} #cv_video {位置：Z-Index：} #BarragePlayer {related：block：900px;} ;} </style> <body> <div id = barageplayer> <mvas id = cv_video width = 900px height = 450px> </canvas> <video id = v_video src = test .mp4コントロールタイプ=ビデオ/mp4> </ビデオ> </div> <div id = barrageinput> <div> <入力タイプ=テキストID = SMSGプレースホルダー=弾幕コンテンツを入力してください/> <ボタンID = send> </button> </div> <div id = ColorPick> <div class = pickdiv id = white> </div> <div class = pickdiv id = red> </div> <div class = pickdiv id = yellow> </div> </div class = pickdiv id = blue> </div> <div class = pickdiv id = green> </div> </div> <div id = typepick> <input type = radio name = type = defaul t> = falue = static top> static top <入力タイプ=無線名=タイプ値=静的ボトム>静的ボトム> div> <div id = speedpick> <入力タイプ=無線name =速度= 1> 1x <入力タイプ=ラジオ名=速度値= 2> 2x <入力タイプ=無線名=速度値= 3> 3x </div> <div = stylepick> </div> <script> var c = document.getElementByID（cv_video）; var typedom.getelementsbyname（speed）; 1 var msgs = [] addeventristener（click '）{event.target.id） color =＃339933; length; if（typedomed）{typedom [i]} speeddom [i] {speed = 2*parseint（i]。} var tempbarrage = n。 ;} //弾薬パーツの関数//弾薬オブジェクト（This.Content = conter; = speed; if（this.type == default）{this.height = paraseint（math.random（）*c_hei ght）+10;} parseint（（c_height/2）-math.random（）*c_height/2）+10;} else if（this.type == static bottom）{th is .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;}} //アニメーション効果setx.save（）; null）{if（msgs [i] .type == default）{handledefault（msgs [msgs [i]）;} else {handlestatic（msgs [i]）;}}}}、20）//デフォルトの弾幕スタイルを処理するfunction 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、ctx.fillstyle.filltext（ctx.color）;左== reft == null）{reft = c = null; //ctx.restore（）;上記は、編集者がキャンバスを使用して、質問がある場合は、皆に返信することをお勧めします。 VEVBウーリンのウェブサイトへのご支援ありがとうございます！