<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas style="width: 1280px;height: 720px;background-color: rgba(0,0,0,0.2)">你的浏览器不支持canvas</canvas>

</body>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<script>

    (function ($) {

    function Barrager(dom) {

        this.canvas = dom.get();

        this.ctx = this.canvas.getContext("2d");

        this.msgs = new Array();//缓冲池，长度越大，屏幕上显示的就越多

        this.width = ;//canvas分辨率1280*720

        this.height = ;

        this.canvas.width=this.width;//上边的两步可以省略，直接在这里赋值

        this.canvas.height=this.height;

        this.font = "30px 黑体";//字体和字体大小

        this.ctx.font=this.font;

        //颜色数组，在绘制过程中随机从这里取出颜色

        this.colorArr=["Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen","PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","SeaShell","Sienna","Silver","SkyBlue"];

        this.interval = "";

        this.draw = function () {//绘制方法

            if (this.interval != "")return;

            var _this=this;

            this.interval = setInterval(function () {//每隔20毫秒重新绘制一次，间隔最好小于40，要不然效果就跟播放图片差不多

                //1，清除屏幕

                _this.ctx.clearRect(, , _this.width, _this.height);

                _this.ctx.save();

                //2，循环缓冲区域，把没有设置Left，Top，Speed，Color先赋值，赋值的就改变left值（产生移动效果），left值小于200就会从缓冲区移除

                for (var i = ; i < _this.msgs.length; i++) {

                    if (!(_this.msgs[i] == null || _this.msgs[i] == "" || typeof(_this.msgs[i]) == "undefined")) {

                        if(_this.msgs[i].L==null || typeof(_this.msgs[i].L)=="undefined"){

                            _this.msgs[i].L=_this.width;

                            _this.msgs[i].T=parseInt(Math.random() * );

                            _this.msgs[i].S=parseInt(Math.random() * ( - ) + );

                            _this.msgs[i].C=_this.colorArr[Math.floor(Math.random() * _this.colorArr.length)];

                        }else{

                            if(_this.msgs[i].L<-){

                                _this.msgs[i]=null;

                            }else {

                                _this.msgs[i].L=parseInt(_this.msgs[i].L-_this.msgs[i].S);

                                _this.ctx.fillStyle =_this.msgs[i].C;

                                _this.ctx.fillText(_this.msgs[i].msg,_this.msgs[i].L,_this.msgs[i].T);

                                _this.ctx.restore();

                            }

                        }

                    }

                }

            }, );

        };

        //添加数据，数据格式[{"msg":"nihao"}]

        this.putMsg = function (datas) {//循环缓冲区，把位置是空的装填上数据

            for (var j = ; j < datas.length; j++) {

                for (var i = ; i < this.msgs.length; i++) {

                    if (this.msgs[i] == null || this.msgs[i] == "" || typeof(this.msgs[i]) == "undefined") {

                        this.msgs[i] = datas[j];

                        break;

                    }

                }

            }

            this.draw();

        };

        this.clear = function () {//清除定时器，清除屏幕，清空缓冲区

            clearInterval(this.interval);

            this.interval="";

            this.ctx.clearRect(, , this.width, this.height);

            this.ctx.save();

            for(var i=;i<this.msgs.length;i++){

                this.msgs[i]=null;

            }

        };

    }

    $.fn.barrager = function (para) {

        if (typeof(para)=="string") {

            try{

                var api = $(this).data('barrager_api');

                api[para].apply(api);

            }catch (e){}

        } else if (typeof para == 'object' || !para) {

            $this = $(this);

            if ($this.data('barrager_api') != null && $this.data('barrager_api') != ''){

                var api = $this.data('barrager_api');

                api.putMsg(para);

            }else{

                var api = new Barrager($this);

                $this.data('barrager_api', api);

                api.putMsg(para);

            }

        } else {

            $.error('Method ' + method + ' does not exist on jQuery.slidizle');

        }

        return this;

    }

})(jQuery);

</script>

<script>

    // $('canvas').barrager([{"msg":"这是我发的。。。哈哈哈"}]);// 发送弹幕

    $('canvas').barrager([{"msg":"看着不错。。。。"},{"msg":"哈哈哈。。。。"},{"msg":"不错不错。。"},{"msg":"真好看。。。。"}]);//多条发送方式

    // $('canvas').barrager("clear"); //清除/关闭弹幕

</script>

</html>

canvas 弹幕效果的更多相关文章

  1. h5做直播的弹幕效果

    最近在搞弹幕效果所以就写一个关于弹幕的吧,刚开始寻思去网上找插件的,但找的插件和我的需求都不太相符,其实做弹幕我知道的有两种方法: 1:一种是用canvas和对象来完成弹幕想过,用canvas来完成弹 ...

  2. 又一枚精彩的弹幕效果jQuery实现

    精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下   简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失.   涉及知识点:val().random ...

  3. CodePen 作品秀：Canvas 粒子效果文本动画

    作品名称——Shape Shifter,基于 Canvas 的粒子图形变换实验.在页面下方的输入框输入文本,上面就会进行变换出对应的粒子效果文本动画. CodePen 作品秀系列向大家展示来自 Cod ...

  4. android 弹幕效果demo

    记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最 ...

  5. Android 自定义View修炼-自定义弹幕效果View

    一.概述 现在有个很流行的效果就是弹幕效果,满屏幕的文字从右到左飘来飘去.看的眼花缭乱,看起来还蛮cool的 现在就是来实现这一的一个效果,大部分的都是从右向左移动漂移,本文的效果中也支持从左向右的漂 ...

  6. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  7. HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET

    HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示

  8. HTML5 Canvas动画效果实现原理

    在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...

  9. Android：简单的弹幕效果达到

    首先,效果图.分类似至360检测到的骚扰电话页面: 布局非常easy,上面是一个RelativeLayout,以下一个Button. 功能: (1)弹幕生成后自己主动从右側往左側滚动(Translat ...

随机推荐

  1. C#中抽象类和接口的区别

    原文:C#中抽象类和接口的区别 大家在编程时都容易把抽象类和接口搞混,下面为大家从概念上讲解抽象类和接口的区别: 一.抽象类: 含有abstract修饰符的class即为抽象类,抽象类是特殊的类,只是 ...

  2. CSS知识点：font小细节

    font是用来设置网页字体属性的关键字,使用频率非常高,大家也比较熟悉.它有两种写法,一种是简写,一种分开写. 简写--font:italic bold 12px/20px arial,sans-se ...

  3. C#程序员阅读的书籍

    推荐几本C#程序员阅读的书籍   楼主这些年一直追随微软技术,也看了不少书籍,整理出一些个人认为不错的经典,推荐给各位阅读,以共同进步. 推荐顺序是由浅入深,深入浅出. <Professiona ...

  4. UML基础概念

    UML概述 uml简介 uml(unified Modeling Language )为面向对象软件设计提供统一的.标准的.可视化的建模语言.适用于描述以用例为驱动,以体系结构为中心的软件设计的全过程 ...

  5. Matlab中如何用命令方式保存图像?

    命令很简单,例如下面这个代码将当前图像保存到F1.emf文件中,保存格式为emf saveas(gcf,'F.emf','emf'); 当然了,也可以保存为jpg格式,修改为: saveas(gcf, ...

  6. 解决Github使用Fastly CDN而导致不能加载网页的方法

    Github现在基本属于“安全”网站,但 Github使用fastly.net的CDN服务后,其网站在国内经常不能正常加载网页.github.global.ssl.fastly.net的亚洲IP一般为 ...

  7. C#外挂QQ

    C#外挂QQ找茬辅助源码,早期开发   这是一款几年前开发的工具,当年作为一民IT纯屌,为了当年自己心目中的一位女神熬夜开发完成.女神使用后找茬等级瞬间从眼明手快升级为三只眼...每次看到这个就会想起 ...

  8. SQL计算年代差

    1.用datediff函数 select datediff(yyyy,StuBirthday,getdate())>17 2.用year函数 select (year(getdate()-yea ...

  9. 程序媛也会画图 之 在ubuntu下用GIMP制作gif

    动画是什么?就是几张图片很快的顺序播放嘛,今天就画画gif小图吧,以后在演示效果图的时候也用的上. 1.准备一个小图 就用小绿人好了 2.打开GIMP 3.新建一个图片打开  文件 ->新建输入 ...

  10. 【xcode插件介绍】Alcatraz ----The package manager for Xcode

    对于许多iOS开发者而言,Alcatraz并不陌生,甚至是相当的喜闻乐见.Alcatraz是一款开源的Xcode包管理器,由Marin Usalj.Delisa Mason和Jurre Stender ...