canvas发送视频弹幕功能效果 html+css+js

Posted 北极光之夜。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas发送视频弹幕功能效果 html+css+js相关的知识,希望对你有一定的参考价值。

一.话不多,先上效果:

b站超清演示视频地址

二.详细实现步骤:

1.先定义HTML标签:

 <div class="container">        
            <video src="./vd.mp4" controls loop autoplay ></video>
            <canvas></canvas>
        <div class="send">
            <input type="text" value="" maxlength="20" placeholder="快来发条弹幕~">
            <button>发送</button>
        </div>
        <input type="color" class="color" value="#FF0000">
    </div>

.container为底层盒子
video为视频
input为输入框
button为发送按钮
.color为颜色选择器

2.老套路全局css样式:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(125, 184, 252);
}

display: flex; flex布局,可以让子元素居中。
3.底层盒子样式:

.container{
    position: relative;
    width: 500px;
    height: 380px;
}

position:relative;相对定位

4.视频样式:

video{
    width: 500px;
    height: 350px;
    object-fit: cover;
    border: 2px outset rgb(211, 211, 211);
}

object-fit: cover;保持原有尺寸比例。但部分内容可能被剪切。

5.输入框与发送按钮样式:

.send{
    width: 500px;
    height: 30px;
}
.send>input{
    float: left;
    height: 100%;
    width: 440px;
    outline:none;
    padding-left: 1em;
    border-radius: 5px 0 0 5px;
    border: 1px solid rgb(155, 155, 155);
}
.send>button{
    float: left;
    height: 100%;
    width: 60px;
    border-radius: 0 5px 5px 0;
    border: none;
    cursor: pointer;
    background-color: rgb(22, 162, 255);
    color: #fff;
    letter-spacing: 3px;
    box-shadow: 1px 1px 1px rgb(75, 75, 75),
    inset 1px 1px 1px  white;
}
.send>button:active{
    box-shadow:inset 1px 1px 1px rgb(75, 75, 75),
     1px 1px 1px  white;
}

outline:none; 去掉轮廓
letter-spacing: 3px; 字间距。
cursor: pointer;鼠标样式为小手

6.颜色选择器和画布样式:

 .color{
    position: absolute;
    bottom: 1px;
    right: 65px;
    width: 20px;
    height: 20px;
}
canvas{
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
}

pointer-events: none;元素永远不会成为鼠标事件的target。

7.开始JavaScript部分,先获取标签和定义变量:

   // 输入框
    const input = document.querySelector("input");
    // 发送按钮
    const btn = document.querySelector("button");
    // 颜色改变
    const color = document.querySelector(".color");
    // 定义canvas
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    //当前颜色
    var nowColor = color.value;
     // 保存弹幕的数组
    var texts = [];
    // 画布宽高
    canvas.width = 500;
    canvas.height = 200;

8.当颜色改变,nowColor重新赋值:

 color.addEventListener('change',()=>{
        nowColor = color.value;
    })

9. 点击发送按钮时,获取输出框文本并添加到弹幕数组里,同样,回车也是执行同样的操作:

  btn.addEventListener('click',()=>{
  // 保存输入框文本
        let nowTxt = input.value;
        // 判断文本是否为空
        if(nowTxt!=''){        
        // 清空输入框   
         input.value = '';
         //给弹幕数组添加这一文本
         texts.push({
             txt:nowTxt,
             //该弹幕生成的(x,y)位置
             x:canvas.width,
             // 给个随机值
             y:Math.random()*(canvas.height-16)+16,
             // 弹幕颜色为当前颜色
             color:nowColor
         })            
        }        
    })
 input.addEventListener('keydown',e=>{
       //直接调用点击发送按钮事件
         if(e.keyCode==13){
              btn.click();
         }
    })

10.实现弹幕滚动效果:

  function update(){
  // 清除画布
        ctx.clearRect(0,0,canvas.width,canvas.height);
           // 改变弹幕数组里每一条弹幕位置,x值减少就好
            for(let i=0;i<texts.length;i++){                
                texts[i].x -= 1;
                // 若已移出视频很远了,删除弹幕数组元素
                if(texts[i].x<-500) texts.splice(i,1);
            }
          // 绘制文字
        texts.forEach(item=>{
            ctx.font = "16px Arial";
             //颜色
            ctx.fillStyle = item.color;
            //位置
            ctx.fillText(item.txt,item.x,item.y);
        })       
        // 执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画
        window.requestAnimationFrame(update);
    }
    update();

三.完整代码:

html

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>auroras</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="container">
            <video src="./vd.mp4" controls loop autoplay ></video>
            <canvas></canvas>
        <div class="send">
            <input type="text" value="" maxlength="20" placeholder="快来发条弹幕~">
            <button>发送</button>
        </div>
        <input type="color" class="color" value="#FF0000">
    </div>
    <script src="./index.js"></script>

</body>
</html>

CSS:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(125, 184, 252);
}
.container{
    position: relative;
    width: 500px;
    height: 380px;
}
video{
    width: 500px;
    height: 350px;
    object-fit: cover;
    border: 2px outset rgb(211, 211, 211);
}
.send{
    width: 500px;
    height: 30px;
}
.send>input{
    float: left;
    height: 100%;
    width: 440px;
    outline:none;
    padding-left: 1em;
    border-radius: 5px 0 0 5px;
    border: 1px solid rgb(155, 155, 155);
}
.send>button{
    float: left;
    height: 100%;
    width: 60px;
    border-radius: 0 5px 5px 0;
    border: none;
    cursor: pointer;
    background-color: rgb(22, 162, 255);
    color: #fff;
    letter-spacing: 3px;
    box-shadow: 1px 1px 1px rgb(75, 75, 75),
    inset 1px 1px 1px  white;
}
.send>button:active{
    box-shadow:inset 1px 1px 1px rgb(75, 75, 75),
     1px 1px 1px  white;
}
.color{
    position: absolute;
    bottom: 1px;
    right: 65px;
    width: 20px;
    height: 20px;
}
canvas{
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
}

javascript

  const input = document.querySelector("input");
    const btn = document.querySelector("button");
    const color = document.querySelector(".color");
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');

    var nowColor = color.value;
    var time = 3;
    var texts = [];
    canvas.width = 500;
    canvas.height = 200;

    color.addEventListener('change',()=>{
        nowColor = color.value;
    })
    btn.addEventListener('click',()=>{
        let nowTxt = input.value;
        if(nowTxt!=''){           
         input.value = '';
         
         texts.push({
             txt:nowTxt,
             x:canvas.width,
             y:Math.random()*(canvas.height-16)+16,
             color:nowColor
         })            
        }        
    })
    input.addEventListener('keydown',e=>{
         if(e.keyCode==13){
              btn.click();
         }
    })
    function update(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
     
            for(let i=0;i<texts.length;i++){                
                texts[i].x -= 1;
                if(texts[i].x<-500) texts.splice(i,1);
            }
   
        texts.forEach(item=>{
            ctx.font = "16px Arial";
            ctx.fillStyle = item.color;
            ctx.fillText(item.txt,item.x,item.y);
        })       
        window.requestAnimationFrame(update);
    }
    update();

    

四.总结:

有一天

开始从平淡日子感受快乐

看到了明明白白的远方

我要的幸福

我要稳稳的幸福

能抵挡末日的残酷

在不安的深夜

能有个归宿

------------------ 陈奕迅《稳稳的幸福》

在这里插入图片描述

五.其它:

关注我看更多简单创意特效:
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结(一)
Sass总结笔记
…等等
进我主页看更多~

以上是关于canvas发送视频弹幕功能效果 html+css+js的主要内容,如果未能解决你的问题,请参考以下文章

前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

Canvas + WebSocket + Redis 实现一个视频弹幕

视频网站弹幕开发

50行代码搞定弹幕效果

50行代码搞定弹幕效果

goeasy+jquery+ckplayer实现动态实时视频弹幕