HTML uses canvas to implement bullet screen function
|
Introduction Recently, I needed to make a barrage player when doing a big assignment. I borrowed someone else's source code and re-implemented it myself. The demonstration is as follows
The main functions are Send barrage Set the color, speed and type of barrage Display barrage Known defects: Cannot full screen The canvas is not adaptive, the player controls are not customized, the corresponding barrage is not displayed according to the playback time, and the barrage cannot be hovered. Known defects will be improved in the future. The source code of the barrage player that can be found on the Internet generally only has scrolling barrage but no static barrage. Here I have specially added the implementation of static barrage. Canvas draws text and text scrolling effect The core of the entire player is to draw text and animate text scrolling. There is no good animation support for text in canvas, so we can only implement it by ourselves. The idea is to continuously clear the screen and rewrite the text. When the frequency of clearing the screen and rewriting reaches 24fps, it will be a smooth animation. First add the video tag and canvas tag to the HTML file
<div id="barrageplayer">
<canvas id="cv_video" width="900px" height="450px"></canvas>
<video id="v_video" src="test.MP4" controls type="video/mp4"></video>
</div>Set the position style of the canvas tag to position:absolute and then the video and canvas will overlap, making it look like a bullet screen player. Then add bullet-screen related content 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");
//Set the font style ctx.font="25px DengXian";
The canvas information has been obtained and set. A good cook cannot cook without rice. Next, we need to construct the barrage object. The construction mode used is the dynamic prototype mode // barrage object function Barrage (content, color, type, speed) {
this.content=content;
this.color=color;
this.type=type;
this.speed=speed;
if(this.type=="default"){
this.height=parseInt(Math.random()*c_height)+10;
}else if (this.type=="static top"){
this.height=parseInt((c_height/2)-Math.random()*c_height/2)+10;
}else if (this.type=="static bottom"){
this.height=parseInt((c_height/2)+Math.random()*c_height/2)+10;
}
if(typeof this.move!="function"){
Barrage.prototype.move=function(){
if(this.type=="default"){
this.left=this.left-this.speed;
}
}
}
} The constructed barrage object initializes various parameters, including content, color, motion type and speed, and defines the move() method to control the easing of the barrage. Each time the move() method is triggered, it scrolls left by one pixel of unit speed.
//Loop and write the canvas to achieve 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{
handleStatic(msgs[i]);
}
}
}
},20)The erase is performed every 20ms. ctx.clearRect(0,0,c_width,c_height); clears the entire current canvas, and then uses ctx.save() to save the current canvas. Then, the bullet list is traversed (msgs is the bullet list, and each time a bullet is sent, the bullet instance will be added to the list), and then processed according to the default style or static style bullet. If it is a default style bullet comment, it will be processed as follows
//Handle 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;
ctx.fillText(barrage.content,barrage.left,barrage.height)
ctx.restore();
}
}
}First, if the bullet message instance does not have a left attribute set, assign it the width of the canvas. If the bullet message instance has exited the canvas, set it to null to save memory. Otherwise, call the move() method of the bullet message instance to change the value of the left attribute, then set the color of the text, write new text, and restore the canvas. This completes one frame of animation. The implementation method for static barrage is as follows
//Handle static barrage style function handleStatic(barrage){
ctx.moveTo(c_width/2,barrage.height);
ctx.textAlign="center";
ctx.fillStyle=barrage.color;
ctx.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.fillText("",c_width/2,barrage.height);
barrage=null;
//ctx.restore();
ctx.clearRect(0,0,c_width,c_height);
}else{
barrage.left=barrage.left-6;
}
}
}First, move the base point of the canvas to the center of the canvas. It should be noted that a new canvas is generated at this time, and the clearRect() method of the original canvas is no longer applicable to this canvas. Then set the text alignment to center, set the text style, and fill in the text. Because the barrage is static, there is no need for easing. However, the static barrage will also disappear, so a flag needs to be set to make it disappear at a certain time. In order not to occupy extra attributes here, we directly use the left attribute as the flag, and also decrement the left attribute, but do not reflect the decrement in the canvas. When the left reaches the threshold, the ctx.clearRect() method is used to clear the bullet comment. This realizes the processing of static barrage. As for other settings about colors and styles, those who have a certain foundation should be able to master them easily, so I will not introduce them in detail here. Just read the executable code part to understand it. Summarize This project mainly uses canvas to draw text and realize text slow animation. The main methods used are canvasDom.getContext() canvas.save()/canvas.restore() canvas.clearRect() canvas.moveTo() I used to not understand save() and restore(), but now I have some understanding. When you change the canvas state, the current canvas is no longer the original canvas, so save the canvas state before modifying it, switch the canvas state, and after completing the work, restore it to the original canvas state to continue working. For example, when I deal with static barrage, I change the base point of the canvas. Then the clearing method of the original canvas is no longer applicable to the current canvas. I have to use another clearing method in the current canvas. Then restore to the original canvas. Runnable code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style type="text/css">
.pickdiv{
width: 30px;
height: 30px;
cursor: pointer;
border: 2px solid gray;
display: inline-block;
}
#white{
background: white;
}
#red{
background:#ff6666;
}
#yellow{
background:#ffff00;
}
#blue{
background:#333399;
}
#green{
background:#339933;
}
#cv_video{
position: absolute;
z-index: 1;
}
#barrageplayer{
position: relative;
display: block;
width: 900px;
height: 500px;
}
#v_video{
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
}
</style>
<body>
<div id="barrageplayer">
<canvas 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 content of the bullet comment"/>
<button id="send">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" value="default">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>
</div>
<script>
var c=document.getElementById("cv_video");
var typeDom = document.getElementsByName("type");
var speedDom = document.getElementsByName("speed");
var colorpick = document.getElementById("colorpick");
var smsg = document.getElementById("smsg");
var color="#white";
var speed=1;
var type="default";
var msgs = [];
//Get the canvas size var c_height=c.height;
var c_width=c.width;
//Get the canvas ctx=c.getContext("2d");
ctx.font="25px DengXian";
//Processing color selection colorpick.addEventListener('click',function(event){
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;
}
})
//Processing sending bullet screen document.getElementById("send").onclick=function(){
var text=smsg.value;
for(var i=0;i<typeDom.length;i++){
if (typeDom[i].checked){
type=typeDom[i].value;
break;
}
}
for(var i=0;i<speedDom.length;i++){
if(speedDom[i].checked){
speed=2*parseInt(speedDom[i].value);
break;
}
}
var tempBarrage = new Barrage(text,color,type,speed);
msgs.push(tempBarrage);
}
//
//Part of the barrage function code//
//Barrage object function Barrage(content,color,type,speed){
this.content=content;
this.color=color;
this.type=type;
this.speed=speed;
if(this.type=="default"){
this.height=parseInt(Math.random()*c_height)+10;
}else if (this.type=="static top"){
this.height=parseInt((c_height/2)-Math.random()*c_height/2)+10;
}else if (this.type=="static bottom"){
this.height=parseInt((c_height/2)+Math.random()*c_height/2)+10;
}
if(typeof this.move!="function"){
Barrage.prototype.move=function(){
if(this.type=="default"){
this.left=this.left-this.speed;
}
}
}
}
//Loop and write the canvas to achieve 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{
handleStatic(msgs[i]);
}
}
}
},20)
//Handle 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;
ctx.fillText(barrage.content,barrage.left,barrage.height)
ctx.restore();
}
}
}
//Handle static barrage style function handleStatic(barrage){
ctx.moveTo(c_width/2,barrage.height);
ctx.textAlign="center";
ctx.fillStyle=barrage.color;
ctx.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.fillText("",c_width/2,barrage.height);
barrage=null;
//ctx.restore();
ctx.clearRect(0,0,c_width,c_height);
}else{
barrage.left=barrage.left-6;
}
}
}
</script>
</body>
</html>The above is what I introduced to you about how to use canvas in HTML to realize the barrage function. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Detailed explanation of JavaScript prototype and examples
>>: Use CSS3 to implement button hover flash dynamic special effects code
Recommend
Build a WebRTC video chat in 5 minutes
In the previous article, I introduced the detaile...
MySQL 8.0.20 installation and configuration method graphic tutorial under Windows 10
Win10 system locally installed MySQL8.0.20, perso...
How to bind domain name to nginx service
Configure multiple servers in nginx.conf: When pr...
Linux Cron scheduled execution of PHP code with parameters
1. Still use PHP script to execute. Command line ...
Learn Vue middleware pipeline in one article
Often when building a SPA, you will need to prote...
Analysis of the implementation process of three modes of VMWare network adapter
Three modes Bridged (bridge mode), NAT (network a...
Implementation of Single Div drawing techniques in CSS
You can often see articles about CSS drawing, suc...
How to create and run a Django project in Ubuntu 16.04 under Python 3
Step 1: Create a Django project Open the terminal...
How to uninstall MySQL cleanly (tested and effective)
How to uninstall Mysql perfectly? Follow the step...
Install Docker environment in Linux environment (no pitfalls)
Table of contents Installation Prerequisites Step...
MySQL Series 11 Logging
Tutorial Series MySQL series: Basic concepts of M...
Solution for Nginx installation without generating sbin directory
Error description: 1. After installing Nginx (1.1...
Linux uses binary mode to install mysql
This article shares the specific steps of install...
Solution ideas and implementation steps for the problem of css and js becoming invalid after struts2 jump
When the jsp that is jumped to after the struts2 a...
How to Learn Algorithmic Complexity with JavaScript
Table of contents Overview What is Big O notation...