<!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. Ubuntu下编译程序是出现pthread_create未定义错误

    gcc -c node_list.c -o node_list.o gcc -lpthread sim.o cli.o list.o node_list.o -o sim.exe sim.o: In ...

  2. proguard android迷茫

    我们收拾它意味着蛊惑项目即将结束.上线.但是,当这个问题就更烦躁人,我也记录因混乱中遇到的问题 首先,我在装android4.0封装版本,有没有在这个文件查看器项目 假设有,请继续点击进入projec ...

  3. Servlet配置load-on-startup

    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...

  4. RPC服务的发布订阅实现Thrift

    Thrift 个人实战--RPC服务的发布订阅实现(基于Zookeeper服务) 前言: Thrift作为Facebook开源的RPC框架, 通过IDL中间语言, 并借助代码生成引擎生成各种主流语言的 ...

  5. 创建自己的github代码库

    前提: 1.安装git 2.在github上创建一个repository(库),如名字叫Hello-World,则git地址为https://github.com/username/Hello-Wor ...

  6. JavaScript实例技巧精选(13)—计算在网页上的停留时间

    >>点击这里下载完整html源码<< 这是截图: 核心代码如下: <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- ...

  7. SOLID 设计原则 In C# 代码实现

    [S] Single Responsibility Principle (单一职责原则) 认为一个对象应该仅只有一个单一的职责 namespace SingleResponsibilityPrinci ...

  8. 【ios开发】ios开发问题集锦

    1. ARC forbids explicit message send of'release' 'release' is unavailable: not available inautomatic ...

  9. MVC一些需要注意的问题

    不使用MVC,不知道MVC的好处,但是也会有一些坑,需要注意一下: 比如控件中添加HTML5自定义属性,以为是这样: @Html.TextBox("date",Model.Date ...

  10. VS调试技巧与快捷键&&VS快捷键

    VS调试技巧与调试快捷键 1.添加断点或取消断点:F9(或者点击代码行最左边的灰色行)   2.调试:F10逐过程(不进入函数内部,直接获取函数运行结果)  F11逐语句(会进入函数),如果想跳出函数 ...