未加星标

canvas 弹幕效果(实例分享)

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

话不多说,请看代码

<!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(0);
this.ctx = this.canvas.getContext("2d");
this.msgs = new Array(300);//缓冲池,长度越大,屏幕上显示的就越多
this.width = 1280;//canvas分辨率1280*720
this.height = 720;
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(0, 0, _this.width, _this.height);
_this.ctx.save();
//2,循环缓冲区域,把没有设置Left,Top,Speed,Color先赋值,赋值的就改变left值(产生移动效果),left值小于200就会从缓冲区移除
for (var i = 0; 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() * 700);
_this.msgs[i].S=parseInt(Math.random() * (10 - 4) + 4);
_this.msgs[i].C=_this.colorArr[Math.floor(Math.random() * _this.colorArr.length)];
}else{
if(_this.msgs[i].L<-200){
_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();
}
}
}
}
}, 20);
};
//添加数据,数据格式[{"msg":"nihao"}]
this.putMsg = function (datas) {//循环缓冲区,把位置是空的装填上数据
for (var j = 0; j < datas.length; j++) {
for (var i = 0; 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(0, 0, this.width, this.height);
this.ctx.save();
for(var i=0;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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: jQuery浏览器数据OrangeUT分辨率
分页:12
转载请注明
本文标题:canvas 弹幕效果(实例分享)
本站链接:http://www.codesec.net/view/524327.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(82)