<!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. 文件合并工具DiffMerge发布4.2版本

    DiffMerge一直是文件对比合并工具的佼佼者,其最大特点是多文件对比与合并,并提供可视化界面用于编辑. 此次DiffMerge v4.2发布,提高了文件差异对比,并提供了快速匹配功能,以及更好的用 ...

  2. JSON解析之Json-lib

    1.Json-lib介绍 Json-lib是一个java类库,它用于把beans, maps, collections, java arrays and XML 传递给一个Json,或者返回来把Jso ...

  3. CQRS架构如何实现高性能

    CQRS架构如何实现高性能 CQRS架构简介 前不久,看到博客园一位园友写了一篇文章,其中的观点是,要想高性能,需要尽量:避开网络开销(IO),避开海量数据,避开资源争夺.对于这3点,我觉得很有道理. ...

  4. Entity Framework 丢失数据链接的绑定，在已绑好的EDMX中提示“Choose Your Data Connection”

    早先做的一个练手的项目中, 使用到了Entity framework . 最近碰到一个问题,在edmx 里面选择“Update model from Database” 的时候提示了 “Choose ...

  5. windows系统SVN和apache的下载和安装

    原文:windows系统SVN和apache的下载和安装 版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明http://ejb3.blogbus.com/logs/107443052. ...

  6. Linux根目录下文件说明

    /bin:存放最常用命令: /boot:启动Linux的核心文件: /dev:设备文件: /etc:存放各种配置文件: /home:用户主目录: /lib:系统最基本的动态链接共享库: /mnt:一般 ...

  7. bootstrap + angularjs + seajs构建Web Form前端2

    bootstrap + angularjs + seajs构建Web Form前端(二) 回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操 ...

  8. 2013.2.A&&3.A

    半期考之后,磨磨蹭蹭的刷了两套长乐的模拟题[=-=我现在实在是不敢恭维自己的刷题速度]感觉貌似很久没有来这里喂食了,就顺便yy下题解好了 2013.2.A: ice :BFS和spfa都可以,我打了个 ...

  9. 重载 C 函数

    在 clang 的扩展下,可以重载 C 函数,例如重载 sin 函数: float __attribute__((overloadable)) sin(float x) { return sinf(x ...

  10. cubieboard 配置WIFI

    1.先装好驱动程序 2.ifconfig查看无线网卡的名称,比如 3.修改/etc/networking/interfaces,配置 wpa-essid填写WIFI名称 wpa-psk填写密码 4. ...