HTML使用canvas实现弹幕功能

时间：2017-08-17

简介

最近在做大作业的时候需要做一个弹幕播放器。借鉴了一下别人的源码自己重新实现了一个，演示如下

HTML使用canvas实现弹幕功能

主要的功能有

发送弹幕
设置弹幕的颜色，速度和类型
显示弹幕

已知缺陷：

不能全屏

canvas没有做自适应
没有自定义播放器控件
没有根据播放时间显示相应的弹幕
弹幕不能实现悬停
已知的缺陷以后会进行改进。网上能找到的弹幕播放器的源码一般只做了滚动的弹幕而没有做静止的弹幕，这里我特意加上了静止弹幕的实现。

Canvas绘制文字以及文字滚动效果

整个播放器的核心就是绘制文字以及做文字滚动的动画，canvas中对于文字并没有很好的动画支持，只能通过自己实现，实现的思路就是不断的清屏然后重写文字，当清屏重写的频率达到24fps的时候就是流畅的动画了。

先在HTML文件中添加视频video标签和画布canvas标签

<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>

把canvas标签的位置样式设置为position:absolute然后视频和画布就重叠在一起，看起来就是一个弹幕播放器了。然后为画布添加弹幕相关的内容，首先获取画布的相关信息和设置画布的字体大小和字体样式

var c=document.getElementById("cv_video");
//获取画布大小
var c_height=c.height;
var c_width=c.width;
//获取画布
ctx=c.getContext("2d");
//设置字体样式
ctx.font="25px DengXian";
画布信息已经获取和设置，巧妇难为无米之炊，接着我们就要构造弹幕对象，使用的构造模式是动态原型模式
//弹幕对象
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;
            }
        }
    }
}

构造的弹幕对象初始化了各种参数，包括内容，颜色，运动类型和速度，定义了move()方法来控制弹幕的缓动，每出发一次move()方法向左滚动一个单位speed的像素。
弹幕对象构造完成之后就进入到主题，动画的制作，直接上代码

//循环擦写画布实现动画效果
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)

每20ms执行一次擦写，ctx.clearRect(0,0,c_width,c_height);是将整张当前的画布清除，然后使用ctx.save()将当前的画布保存，接着遍历弹幕列表(msgs是弹幕列表，当每发送一条弹幕都会将该弹幕实例添加到列表中)，然后按照默认样式的弹幕还是静止样式的弹幕分别处理。如果是默认样式的弹幕将会按照以下的方法处理

//处理默认弹幕样式
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();
        }
    }  
}

首先如果弹幕实例没有设置left属性则将画布的宽度赋予它，如果弹幕实例已经退出画布则将其置null以节省内存，否则的话就调用弹幕实例的move()方法改变left属性的值，然后设置文字的颜色，一级写入新的文字，恢复画布。这样就完成了一帧动画。

共3页:

上一篇1/3

上一篇：HTML name id和class的区别_动力节点Java学院整理 下一篇：HTML图片img标签_动力节点Java学院整理

HTML使用canvas实现弹幕功能

相关文章

最新文章