<!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. .net操作PDF的一些资源(downmoon收集)

    因为业务需要,搜集了一些.net操作pdf的一些资源,特在此分享. 1.如何从 Adobe 可移植文档格式 (PDF) 文件中复制文本和图形 http://support.microsoft.com/ ...

  2. 什么是Solr搜索

    什么是Solr搜索 一.Solr综述   什么是Solr搜索 我们经常会用到搜索功能,所以也比较熟悉,这里就简单的介绍一下搜索的原理. 当然只是介绍solr的原理,并不是搜索引擎的原理,那会更复杂. ...

  3. wpf的datagrid和winform的datagridview刷新

    DataGrid的数据源的加载需要大量IO操作,不可能等数据全部读取之后才显示到UI上.由于对WPF数据绑定不很熟悉,对ObserveCollection等内容没有太多时间去研究,只能用一些取巧的办法 ...

  4. DBMS_LOB包的使用

    DBMS_LOB包的使用 1.  dbms_lob.append( dest_lob  IN  OUT  NOCOPY  BLOB, src_lob  IN  BLOB) dbms_lob.appen ...

  5. 路由模块router实现step1

    hashchange事件 参考:http://www.cnblogs.com/rubylouvre/archive/2012/10/24/2730599.html 需要解决的问题: 1.IE6/7及兼 ...

  6. CodeRush配置Nunit使用

    Web:http://www.nunit.org/  配置和DevExpress的CodeRush Install-Package NUnit 下载Nunit后设置CodeRush目录,如下图: 下面 ...

  7. c/c++操作访问数据，是堆中的数据快还是栈中的数据快

    这里的问题其实问的是对堆与栈的数据访问有什么不同. 观察如下代码: #include<stdio.h> #include<iostream> using namespace s ...

  8. Bootstrap3.0学习第三轮(栅格系统案例)

    Bootstrap3.0学习第三轮(栅格系统案例) 前言 在前面的一篇文章当中http://www.cnblogs.com/aehyok/p/3400499.html主要学习了栅格系统的基本原理,以及 ...

  9. 模块化开发AraeRegistration

    .NET/ASP.NET MVC(模块化开发AraeRegistration) 阅读目录: 1.开篇介绍 2.AreaRegistration注册路由(传递路由上下文进行模块化注册) 1]开篇介绍 A ...

  10. 批量转换cue文件编码

    之前在网上下载的无损(flac.ape),好多都是整盘的,也就是说一个flac或ape文件搭配一个cue分轨文件,这个文件记录着在不同时间段是哪一首歌曲. 由于之前的操作都是在windows下进行的, ...