HTML uses Canvas to achieve barrage function

Recently, you need to make a barrage player when you are doing big homework. I have remembered the source code of others and re -realized one, and the demonstration is as follows

Vessel

Set the color, speed and type of the barrage

Display barrage

Can't full screen

Canvas does not adapt to adaptation

No custom player control

The corresponding barrage is not displayed according to the playback time

The barrage cannot be suspended

Known defects will be improved in the future. The source code of the barrage player that can be found on the Internet generally only makes rolling barrage without a static barrage. Here I deliberately add the realization of the static barrage.

The core of the entire player is to draw text and make text rolling animations. In Canvas, there is no good animation support for text. It can only be realized through its own. When the frequency of writing reaches 24FPS is a smooth animation.

First add video Video tags and canvas cables in HTML files

 <div ID = Barrageplayer> <Canvas ID = CV_VIDEO WIDTH = 900px Height = 450px> </Canvas> <VIDEO ID = V_VIDEO SRC = Test.mp4 Controls = Video/MP4> /video> </div>

Set the position style of the Canvas tag to Positive: AbSolute and then the video and canvas are overlapped together. It looks like a barrage player. Then add the content of the barrage to the canvas. First, get the relevant information of the canvas and set the font size and font style of the canvas.

 var c = document.GetelementByid (CV_VIDEO); // Get the canvas size var C_height = C.Height; var C_width = C.Width; // Get the canvas CTX = C.GetContext (2D); tx.font = 25PX DENGXIAN; canvas information has been obtained and set, and the clever woman is difficult to cook without rice. Then we have to construct a barrage object. The constructor used is the dynamic prototype mode // The barrage object Function Barrage (content, color, type, spey) { This.Content = Content; this.Color = color; this.type = type; this.Speed ​​= speed; if (this.type == default) om ()*c_height) +10 ;} Else 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 (typeof this.move! = Function) {barrage.prototype.move. nction () {if (This.type == DEFAULT) {this.Left = this.Left-This.speed;}}}}}

The constructed barrage object initializes various parameters, including content, color, movement types and speed, defining the move () method to control the motion of the barrage, each move () method of rolling a unit SPEED to the left every time to left the left method to the left. Essence

After the constructor of the barrage object is completed, the theme is entered, the production of animation, directly on the code

 // Circles and canvas to achieve the animation effect setInterval (function () {ctx.clearrect (0,0, c_width, c_height); ctx.save (); for (var I = 0; i <msgs.Length; I ++) {) {) { if (msgs [i]! = NULL) {if (msgs [i] .Type == Default) {handledefault (msgs [i]);} Else {handleState (msgs [i]);}}}}, 20)

Execute it every 20ms, CTX.CLEARRCT (0,0, C_width, C_HEIGHT); remove the entire current canvas, and then save the current canvas with ctx.save (), and then traversed the barrage list (msgs is the MSGS is The barrage list, when a barrage is sent, the barrage instance will be added to the list), and then processed separately according to the barrage of the default style or the static style. If it is the default style barrage, it will be processed in accordance with the following methods

 // Process the default barrage style function handledefault (barRage) {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.filltext (barrage.content, barrage.left, barrage.head) );}}}

First of all, if the barrage instance does not set the Left attribute, the width of the canvas is given to it. If the barrage instance has exported to the canvas, it will be set to save memory, otherwise call the magic () method of the barrage instance to change the value of the left attribute Then set the color of the text, write new text in the first level, and restore the canvas. This completes a frame of animation.

The implementation method of static barrage is as follows

 // Treatment of static barrage style functions (barrage) {ctx.moveto (C_width/2, Barrage.Height); ctx.textalign = center; ctx.fillstyle = barrage.color; .filltext (barrage.content, c_width/// 2. Barrage.Height); if (barrage.left == Undefined || Barrage.left == NULL) {barrage.left = c.width;} Else {if (barrage.left <-200) {ctx.Fillte XT (XT ( , C_width/2, Barrage.Height); Barrage = NULL; //ctx. Store (); CTX.Clearrect (0,0, C_width, C_Height);} Else {barrage.left = barrage.left-6; }} }

First of all, the base point of the canvas is moved to the center of the canvas. It should be noted that at this time, it is relatively and generated by generating a new canvas. The original scroch method of the canvas is no longer applicable to this canvas. Then set the text alignment to the middle alignment, set the text style, and fill in the text. Because the barrage is static, there is no need to slow down, but the static barrage will also disappear. A logo position needs to be set to make him disappear regularly. In order not to occupy the additional attributes here, we directly use the left attribute as a logo position, which also decreases the LEFT attribute. Clear. In this way, the processing of static barrage is realized.

Other people who have a certain foundation about color and style setting should be easy to master and not introduce it here. Just look at the running code and understand it.

This project mainly uses Canvas for text drawing and slow animation of the text. The main methods are

 Canvasdom.getConotext () canvas.save ()/canvas.restore () canvas.Clearrect () canvas.moveto ()

It turns out that I can't understand it with Save () and RESTORE (). Now I have a little understanding. When you change the state of the canvas, the current canvas are no longer the original canvas, so first put the canvas before modifying the canvas state. State preservation, switch the canvas state, and continue to work after the work is completed. Like when I handle the static barrage, the base point of the canvas has been changed, so the clearance method of the original canvas is no longer applicable to the current canvas. Only in the current canvas use another method of removal. Then return to the original canvas.

Running code

 <! Doctype html> <html Lang = EN> <Head> <meta Charset = UTF-8> <meta name = Viewport Content = Width = DEVICE-WIDTH, Initial-SCALE = 1.0> <META HTT p-equiv = x-uaa -Compatible Content = IE = EDGE> <Title> Document </Title> </Head> <Style Type = Text/CSS> .pickdiv {Width: 30px; Height: 30px; Pointer: Border: 2px solid gray; Display : inline-black;} #white {background: white;} #RED {background: #ff6666;} #yellow {background: #ffff00;} #blue { #333399;} #Green {background: #339933;} #CV_VIDEO {position: absolute; z-index: 1;} #barrageplayer {posity: related: display: block; width: 900px; 500px;} eo {posity: absolute; width: 100%; height: 100% ; Z-index: 0;} </style> <body> <div ID = Barrageplayer> <mvas ID = CV_VIDEO WIDTH = 900px Height = 450px> </Canvas> <Video ID = V_video SRC = Test .Mp4 controls type = Video/MP4> </Video> </DIV> <div ID = Barrageinput> <div> <input Type = Text ID = SMSG Placeholder = Please enter the barrage content/> <Button 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> div class = pickdiv ID = Blue> </DIV> <div class = pickdiv ID = Green> </DIV> </DIV> <DIV ID = Typepick> <input Type = Radio name = Type = DEFAUL T> By default <input Type = Radio name = Type Value = Static Top> Static Top <input Type = Radio Name = Type Value = Static Bottom> Static bottom </div> <div ID = SpeedPick> <input Type = Radio name = speed value = 1> 1x <input type = radio name = speed value = 2> 2x <input type = radio name = speed value = 3> 3x </div> <div ID = stylepick> </div> <Script> Var C = document.GetelementByid (CV_VIDEO); VAR TYPEDOM = DOCUMENT.GetelementsByName (Type); VAR SpeedDom = Document.GetelementsByname (Speed); VAR COLORPI ck = document.GetelementByid (colorpick); var smsg = document.GetelementByid (SMSG); Var color = #White; var speed = 1; var Type = DEFAULT; VAR MSGS = []; // Get the size of the canvas var c_height = c.Height; var c_width = c.width; D) ; ctx.font = 25px dengxian; // Select colorpick.addeventristener ('click', function) {switch (event.target.id) {case white: color = white; break; case red: color =# FF6666; Break; Case YELLOW: COLOR =#FFFF00; Break; Case Green: COLOR =#339933; Break; Case Blue: COLOR =#333399; Break;}) ument.GetelementByid (Send). Onclick = function () {var text = smsg.value; for (var I = 0; I <lpeedom.length; i ++) {if (typedom [i] .Checked) {Type = TypeDom [I]. Value; ;; }} for (var I = 0; I <Speeddom.Length; I ++) {if (Speeddom [i] .Checked) {Speed ​​= 2*PARSEINT (SPEEDDOM [i]. Value); break;} Var Tempbarrage = n. ew Barrage (text, color, type, speard); msgs.push (tempbarrage);} // // The function of the barrage parts // // The barrage object (Content, Color, Type, Speed) {This.Content = Content; this.color = color; this.type = type; this.Speed ​​= speed; if (this.type == default) {this.height = paraseint (math.random ()*c_hei ght) +10;} else if (this.type == Static Top) {this.head = 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;}}} // Circle the canvas of the animation effect setInterval ;; ctx.save (); for (var I = 0; I <msgs.length; i ++) {if (msgs [i]!! = Null) {if (msgs [i] .Type == Default) {handledefault (msgs [MSGS [ i]);} Else {HandleStatic (msgs [i]);}}}, 20) // Process the default barrage style 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; ltext (barrage. Content, Barrage.left, BARRAGE.HEIGHT) CTX.RESTORE ();}} // Treatment of the Static barrage style Function HandleState (BARRAGE) {ctx.moveto (C_WIDTH/2, Barrage.Height); C tx.TextAlign = Center ; ctx.fillstyle = barrage.color; ctx.filltext (barrage.content, c_width/2, barrage.head); if (barrage.left == Undefined || Barrage.left == Null ) {barrage.left = c. width;} else {if (barrage.left <-200) {ctx.fillText (, C_width/2, Barrage.head); barrage = null; //ctx.restore (); H , C_HEIGHT);} Else {Barrage.left = Barrage.left-6;}}} </script> </body> </html>

The above is the HTML introduced by the editor to you to use Canvas to implement the barrage function. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!