<!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. 处理动态SQL语句的参数

    原文:处理动态SQL语句的参数 经常对SQL进行开发,写动态的SQL语句,是少之不了的,但是在使用动态语句中,常是因为有动态的参数的出现.参考下面代码示例: 正因为有了标记1的动态条件代码,而让SQL ...

  2. 阿里云WinServer2008下配置IIS7支持php

    先送一只法克鱿给百度,百度了n多的方法都或多或少有问题. 0.php安装包 php-5.2.1-Win32.zip 下载地址 http://pan.baidu.com/s/1pJuc8YZ 最开始是p ...

  3. viewstate cookie和session原理回顾

    --个人理解会存在些错误仅供参考!!! ----浏览器保持会话状态原理 用户发送一次请求,服务器端会检索报文中是否存在sessionid不存在,就分配一个写到cookie当中,存在浏览器的缓存中,当再 ...

  4. [转]理解C# 4 dynamic(1) - var, object, dynamic的区别以及dynamic的使用

    阅读目录: 一. 为什么是它们三个 二. 能够任意赋值的原因 三. dynamic的用法 四. 使用dynamic的注意事项 一. 为什么是它们三个? 拿这三者比较的原因是它们在使用的时候非常相似.你 ...

  5. Xcode开发和调试总结

    Xcode是iOS开发主要的工具.IDE.关于Xcode的细枝末节,可以参考苹果的官方文档或者众多的说明.此文档主要涉及常用开发和调试注意事项,参考版本为Xcode 5.1.1. 目标设置: 在此,我 ...

  6. 【转】Objc的底层并发API

    本文由webfrogs译自objc.io,原文作者Daniel Eggert.转载请注明出处! 小引 本篇英文原文所发布的站点objc.io是一个专门为iOS和OS X开发者提供的深入讨论技术的平台, ...

  7. usaco1.1.1Your Ride Is Here（入门题）

    一下是我很久很久之前刷的题目...随便扔在这里啦.. Description 一个众所周知的事实,在每一慧星后面是一个不明飞行物UFO.这些不明飞行物时常来收集来自在地球上忠诚的支持者.不幸的是,他们 ...

  8. C++指针数组和指向指针的指针

    指针数组 定义: 如果一个 数组,其元素均为指针型数据,该数组为指针数组,也就是说,指针数组中的每一个元素相当于一个指针变量,它的值都是地址. 形式: 一维指针数组的定义形式为: int[类型名] * ...

  9. 从异步更新进度想起的事儿——IProgress

    今天,在群里向大家请教了这样一个问题:“两个对象(类.窗体或什么)之间,要完成比较频繁的报告进度更新都有哪些好的方式”,Somebody 跳出来给出了个“IProgress”,没了解过,后面围绕着它讨 ...

  10. ios学习之category设计模式

    之前看书的时候,没怎么注意,但在项目中,才发现它的特别之处. 先来看看他用途:官网大意是这样写的:当你想简单的向一个已知类添加一个方法的时候,你就可以使用它.使用它的时候,命名是有要求的,如下: @i ...