首页 / HTML / HTML如何利用canvas实现弹幕功能

HTML如何利用canvas实现弹幕功能

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML如何利用canvas实现弹幕功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9024字，纯文字阅读大概需要13分钟。

内容图文

本篇文章主要介绍HTML如何利用canvas实现弹幕功能，感兴趣的朋友参考下，希望对大家有所帮助。

简介

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

HTML如何利用canvas实现弹幕功能 - 文章图片

主要的功能有

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

已知缺陷：

不能全屏

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

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

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

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

<p id="barrageplayer">
    <canvas id="cv_video" width="900px" height="450px"></canvas>
    <video id="v_video" src="test.MP4" controls type="video/mp4"></video>
</p>

把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属性的值，然后设置文字的颜色，一级写入新的文字，恢复画布。这样就完成了一帧动画。

对于静止弹幕的实现方法如下

//处理静止弹幕样式
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;
        }
    }
}

首先将画布的基点移动到画布的中心，需要注意的是这时候相对与生成了一张新的画布，原来画布的clearRect()方法已经不适用与这张画布了。然后再设置文字对齐为居中对齐，设置文字样式，填充文字。因为弹幕是静止的所以不需要进行缓动，但是静止弹幕也是会消失的，需要设置一个标志位来使他定时消失。在这里为了不占用额外的属性，我们直接使用left属性作为标志位，同样进行left属性的递减，但不把递减反映到画布中，当left达到阈值，则使用ctx.clearRect()方法将弹幕清除。这样就实现了静止弹幕的处理。

其他关于颜色，样式的设置有一定基础的人应该是很容易掌握的在这里就不多介绍了,自己看可运行代码部分理解一下就好。

总结

这个项目主要是使用了canvas进行文字绘制以及实现文字的缓动动画，主要用到的方法有

canvasDom.getContext()
canvas.save()/canvas.restore()
canvas.clearRect()
canvas.moveTo()

原来我对与save()和restore()是不能理解的，现在我算是有一点理解了，当你更改了画布状态，现在的画布就已经不是原来的画布，所以在修改画布状态之前先把画布状态保存，切换画布状态，完成工作之后，恢复为原来的画布状态继续工作。像我处理静态弹幕的时候，把画布的基点改变了，那么原来画布的清除方法就不再适用于当前画布，只有在当前画布中自己使用另外的清除方法。然后再恢复到原来的画布。

可运行代码

<!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">
    .pickp{
        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>
    <p id="barrageplayer">
        <canvas id="cv_video" width="900px" height="450px"></canvas>
        <video id="v_video" src="test.MP4" controls type="video/mp4"></video>
    </p>
    <p id="barrageinput">
        <p>
            <input type="text" id="smsg" placeholder="请输入弹幕内容"/>
            <button id="send"> 发送</button>
        </p>
        <p id="colorpick">
            <p class="pickp" id="white"></p>
            <p class="pickp" id="red"></p>
            <p class="pickp" id="yellow"></p>
            <p class="pickp" id="blue"></p>
            <p class="pickp" id="green"></p>
        </p>
        <p id="typepick">
            <input type="radio" name="type" value="default">默认
            <input type="radio" name="type" value="static top">静止顶部 
            <input type="radio" name="type" value="static bottom">静止底部
        </p>
        <p 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
        </p>
        <p id="stylepick"></p>
    </p>
    <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=[];
        //获取画布大小
        var c_height=c.height;
        var c_width=c.width;
        //获取画布
        ctx=c.getContext("2d");
        ctx.font="25px DengXian";
        //处理颜色选择
        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;
            }
        })
        //处理发送弹幕
        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);
        }
        //
        //弹幕功能部分代码
        //
        //弹幕对象
        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;
                    }
                }
            }
        }
        //循环擦写画布实现动画效果
        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)
    //处理默认弹幕样式
    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();
            }
        }  
    }
    //处理静止弹幕样式
    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>

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

内容总结

以上是互联网集市为您收集整理的HTML如何利用canvas实现弹幕功能全部内容，希望文章能够帮你解决HTML如何利用canvas实现弹幕功能所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/391537.html

来源：【匿名】

【上一篇】HTML中图片<img>标签【下一篇】PHP 和 HTML

更多 ►

【HTML如何利用canvas实现弹幕功能】教程文章相关的互联网学习教程文章

html5 canvas 填充渐变形状【代码】【图】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>填充渐变形状</title><script src="js/modernizr.js"></script></head><body><script type="text/javascript"> window.addEventListener(‘load‘,eventWindowLoaded,...

HTML5中的canvas基本概念及绘图

* Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的图形与HTML页面无关 * 无法通过DOM获取绘制的图形 * 无法为绘制的图形绑定DOM事件 * 只能使用Canvas提供的API * Canvas用途 * 在HTML页面中绘制图表(例如柱状图、饼状图等) * 网页游戏 - Flash技术 * 使用HTML5中的Canvas ...

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf4【图】

CanvasRenderingContext2D对象中用于平移、旋转坐标系的方法镜像scale(1,-1)绘制垂直镜像；scale(-1,1)绘制水平镜像自定义的坐标变换 transform()，多次调用会叠加效果setTransform()，每次调用都会清除上次的效果两个方法都用于旋转、缩放、及平移坐标系（可以根据公式传入0或其他数据）x‘=ax+cy+ey‘=bx+dy+f坐标系旋转公式(angle弧度)x‘=x×cos(angle)-(y×sin(angle))y‘=y×cos(angle)+(x×sin(angle))平移x‘=x+dxy‘=y+dy缩放...

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf7【图】

性能运行putImageData()比drawImage()慢，同等条件下优先考虑drawImage()操作图像数据需要遍历大量数据，应该注意几点：1）避免在循环体中直接访问对象属性，应当保存在局部变量中2）应该用循环计数器遍历完整的像素，而非像素分量（每4个一组）3）逆向遍历与移位技巧效果并不好4）不要频繁使用getImagedata()视频处理var video=document.getElementById(‘video‘);　　//A <video>element　　...context.drawImage(video,0,0);　...

html5 canvas 实现倒计时功能【代码】【图】

function showTime(a) {var b = {id: "showtime", //canvasidx: 60, //中心点坐标 X轴;y: 60, //中心点坐标 Y轴;radius: 60, //圆的半径angle: 0, //角度无需设置linewidth: 6, //线的宽度backround: "#d65554", //倒计时背景色color: "#e4e4e4", //填充色day: 0,time: 0,minute: 0,seconds: 0}if (a) {b = $.extend(b, a);}this.total = 0;this.id = b.id;this.x = b.x;this.y = b.y;this.radius = b.radius;this.angle = b.angl...

HTML5 - canvas标签【代码】

canvas标签<!doctype html><htmllang="zh-CN"><head><metacharset="utf-8" /><title>canvas标签</title><head><body><canvasid="canvas"width="500"height="800"style="background:#ccc;">您的浏览器不支持canvas标签，请升级浏览器！</canvas><script>//获取画布对象var canvas=document.getElementById("canvas");//alert(canvas);//获取用于绘画的...

canvas-star4.html【代码】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><canvas id="canvas" style="margin:0 auto;">The current browser does not support Canvas, can replace the browser a try!</canvas><script>window.onload =function(){var canvas = document.getElementById(‘canvas‘);canvas.width =1200;canvas.height =800;if(canvas.getContext(‘2d‘)){var context = canvas.getCon...

HTML5—canvas绘制图形（1）【代码】【图】

1、canvas基础知识 canvas元素是HTML5中新增的一个重要的元素，专门用来绘制图形，不过canvas本身不具备画图的能力，在页面中放置了canvas元素，就相当于在页面中放置了一块矩形的“画布”，我们可以利用js脚本在“画布”上绘制图形。 1.1canvas元素在利用canvas绘制图形之前，我们首先需要在页面中放置一个canvas元素，如下代码：<canvas id="mycanvas" width="400" height="400">您的浏览器out了</canvas> 说明：（1）放置canva...

基于HTML5的Canvas技术实现前端的图片压缩【代码】

Canvas应用：图片压缩算法实现前端图片压缩应用场景前端页面限制用户只可以上传5MB大小的图片前端在接受到用户上传的图片之后，服务器只允许上传1MB大小的图片，此时需要前端将图片先进行压缩，压缩之后再调用图片上传接口将图片上传第一步：创建input元素，监听input表单域的change事件创建一个input元素，并且设置HTML5新增的type为file监听input元素的change事件，并通过e.target.files拿到用户上传的文件列表数组获取用户上传的...

【前端】Vue利用html2Canvas将Dom内容生成图片并下载（解决svg无法显示的问题）【代码】

需求：将页面中DIV内容块（包含svg流程节点）生成图片并直接下载到用户本地，并且不影响之前的svg图的使用实现：1、安装依赖cnpm install --save html2canvas cnpm install --save canvg@2.0.0-beta.1 canvas@^2 jsdom@^13 xmldom@^0 2、引入依赖import html2canvas from "html2canvas"; import canvg from "canvg"; 3、代码实现主要是两个问题SVG无法显示：借助canvg将svg转canvas不能影响原有的元素显示：上一步会改变原有的dom...

html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法【图】

继续讲canvas中画曲线的方法，今天讲quadraticCurveTo。说实话这个方法有点吓人，单从函数名称上都可以初体验。话说，我觉得有必要把这个函数名缩短。 quadratic的意思是二次，即数学中二次元方程那个二次。而ctx.quadraticCurveTo的参数如下：复制代码代码如下:ctx.quadraticCurveTo(x1,y1,x,y); 其中x,y是终点的坐标，而x1,y1是曲线控制点的坐标？什么？你问我起点在哪里？起点在此之前用moveTo确定。我之所以把控制点的坐标带...

HTML5 Canvas锯齿图代码实例

效果图：提示：把代码复制到一个html文件中并保存，直接打开即可看到效果。实现代码：复制代码代码如下:<!doctype html><html lang="zh"><head><meta charset="gbk"><title>锯齿图</title><script type="text/javascript">window.addEventListener("load", eventWindowLoaded, false);function eventWindowLoaded(){var x,y;var theCanvas = document.getElementById("canvas");var context = theCanvas.getContext("2d");//Boxcon...

html canvas 简单体验

绘制直线var canvas = document.getElementById(‘c1‘);var context = canvas.getContext(‘2d‘); // context.moveTo(10 ,50); //起点// context.lineTo(1000,50); //终点// context.lineWidth = 20; //线宽// context.strokeStyle=‘#cd3828‘; //颜色// context.strokeStyle= "rgb(205,40,40)";// context.lineCap = ‘round‘; //线头是圆形 round // context.stroke(); //开始绘制 // // 绘制第二条线// context.beginPath...

实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码

这是一个很酷的HTML5 Canvas动画，它将模拟的是我们现实生活中烟花绽放的动画特效，效果非常逼真，但是毕竟是电脑模拟，带女朋友看就算了，效果还是差了点，呵呵。这个HTML5 Canvas动画有一点比较出色，就是其性能，Chrome上基本没有卡的感觉，就算你放出很多烟花也一样。　　下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，主要由HTML代码、CSS代码以及Javascript代码组成，当然javascript代码是最重要的。　　HTML代...

Canvas HTML5【代码】【图】

Canvas Examples一个canvas是在html页面上规则的区域。默认的，一个canvas没有边框和内容<canvas id="myCanvas" width="200" height="100"></canvas>基本步骤<script>var canvas = document.getElementById("myCanvas");//发现canvas元素var ctx = canvas.getContext("2d");//创建一个drawing对象 //在画布上画画ctx.fillStyle ="#FF0000"; ctx.fillRect(0,0,150,75); </script>HTML Canvas CoordinatesCanvas CoordinatesThe HTML...

首页 / HTML / HTML如何利用canvas实现弹幕功能

HTML如何利用canvas实现弹幕功能

内容导读

内容图文

内容总结

内容备注

内容手机端

【HTML如何利用canvas实现弹幕功能】教程文章相关的互联网学习教程文章

html5 canvas 填充渐变形状【代码】【图】

HTML5中的canvas基本概念及绘图

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf4【图】

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf7【图】

html5 canvas 实现倒计时功能【代码】【图】

HTML5 - canvas标签【代码】

canvas-star4.html【代码】

HTML5—canvas绘制图形（1）【代码】【图】

基于HTML5的Canvas技术实现前端的图片压缩【代码】

【前端】Vue利用html2Canvas将Dom内容生成图片并下载（解决svg无法显示的问题）【代码】

html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法【图】

HTML5 Canvas锯齿图代码实例

html canvas 简单体验

实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码

Canvas HTML5【代码】【图】

CANVAS - 相关标签

HTML - 相关标签

功能 - 相关标签

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程