应用办法和API
语法如下：
canvasBarrage(canvas, data);
其中：
canvas
canvas示意咱们的<canvas>画布元素，能够间接是DOM元素，也能够是<canvas>画布元素的选择器。
data
data示意弹幕数据，是一个数组。例如上面：
[{ value: '弹幕1', color: 'blue', range: [0, 0.5]}, { value: '弹幕2', color: 'red', range: [0.5, 1]}]能够看到数组中的每一个值示意一个弹幕的信息对象。其中value示意弹幕的文字内容；color示意弹幕描边的色彩（弹幕文字自身默认是红色）；range示意弹幕在画布中的区域范畴，例如[0, 0.5]示意弹幕在画布中的上半区域显示，[0.5, 1]示意弹幕在画布中的下半区域显示。
而后就能够看到有限滚动的弹幕成果了。
补充阐明：
- 此弹幕成果默认文字大小是
28px，并且文字加粗，如果这个成果不合乎您的需要，须要在canvasBarrage()办法中批改源代码。因为原本就是个简略动态成果，因而没有专门设计成API。 - 此弹幕成果默认是红色文字加可变色彩描边，同样的，如果这个成果不合乎您的需要，须要在
canvasBarrage()办法中批改源代码。 - 跟实在的弹幕成果有所不同，这里的弹幕呈现的速度和机会不是基于特定工夫，而是随机产生。所以看到有些文字如同开飞机，而有些文字如同坐着拖拉机。因为是死数据，这样设计会看上去更实在写。
源代码：
<style> .video-x { position: relative; width: 640px; margin: auto; } .canvas-barrage { position: absolute; width: 640px; height: 360px; } .video-placeholder { height: 360px; background-color: #000; animation: bgColor 10s infinite alternate; } @keyframes bgColor { 25% { background-color: darkred; } 50% { background-color: darkgreen; } 75% { background-color: darkblue; } 100% { background-color: sliver; } } </style> <div class="video-x"> <canvas id="canvasBarrage" class="canvas-barrage"></canvas> <div class="video-placeholder"></div> </div> <script> // 弹幕数据 var dataBarrage = [{ value: '应用的是动态死数据', color: 'blue', range: [0, 0.5] }, { value: '随机循环播放', color: 'blue', range: [0, 0.6] }, { value: '能够管制区域和垂直散布范畴', color: 'blue', range: [0, 0.5] }, { value: '字体大小和速度在办法内设置', color: 'black', range: [0.1, 1] }, { value: '适宜用在一些动态页面上', color: 'black', range: [0.2, 1] }, { value: '基于canvas实现', color: 'black', range: [0.2, 0.9] }, { value: '因而IE9+浏览器才反对', color: 'black', range: [0.2, 1] }, { value: '能够设置边框色彩', color: 'black', range: [0.2, 1] }, { value: '文字色彩默认都是红色', color: 'black', range: [0.2, 0.9] }, { value: '若文字色彩不想红色', color: 'black', range: [0.2, 1] }, { value: '须要本人调整下JS', color: 'black', range: [0.6, 0.7] }, { value: '如果须要的是实在和视频交互的弹幕', color: 'black', range: [0.2, 1] }, { value: '能够回到原文', color: 'black', range: [0, 0.9] }, { value: '查看另外一个demo', color: 'black', range: [0.7, 1] }, { value: '上面就是占位弹幕了', color: 'black', range: [0.7, 0.95] }, { value: '后方高能预警！！！', color: 'orange', range: [0.5, 0.8] }, { value: '后方高能预警！！！', color: 'orange', range: [0.5, 0.9] }, { value: '后方高能预警！！！', color: 'orange', range: [0, 1] }, { value: '后方高能预警！！！', color: 'orange', range: [0, 1] }]; // 弹幕办法 var canvasBarrage = function (canvas, data) { if (!canvas || !data || !data.length) { return; } if (typeof canvas == 'string') { canvas = document.querySelector(canvas); canvasBarrage(canvas, data); return; } var context = canvas.getContext('2d'); canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; // 存储实例 var store = {}; // 字号大小 var fontSize = 28; // 实例办法 var Barrage = function (obj, index) { // 随机x坐标也就是横坐标，对于y纵坐标，以及变动量moveX this.x = (1 + index * 0.1 / Math.random()) * canvas.width; this.y = obj.range[0] * canvas.height + (obj.range[1] - obj.range[0]) * canvas.height * Math.random() + 36; if (this.y < fontSize) { this.y = fontSize; } else if (this.y > canvas.height - fontSize) { this.y = canvas.height - fontSize; } this.moveX = 1 + Math.random() * 3; this.opacity = 0.8 + 0.2 * Math.random(); this.params = obj; this.draw = function () { var params = this.params; // 依据此时x地位绘制文本 context.strokeStyle = params.color; context.font = 'bold ' + fontSize + 'px "microsoft yahei", sans-serif'; context.fillStyle = 'rgba(255,255,255,' + this.opacity + ')'; context.fillText(params.value, this.x, this.y); context.strokeText(params.value, this.x, this.y); }; }; data.forEach(function (obj, index) { store[index] = new Barrage(obj, index); }); // 绘制弹幕文本 var draw = function () { for (var index in store) { var barrage = store[index]; // 地位变动 barrage.x -= barrage.moveX; if (barrage.x < -1 * canvas.width * 1.5) { // 挪动到画布内部时候从左侧开始持续位移 barrage.x = (1 + index * 0.1 / Math.random()) * canvas.width; barrage.y = (barrage.params.range[0] + (barrage.params.range[1] - barrage.params.range[0]) * Math.random()) * canvas.height; if (barrage.y < fontSize) { barrage.y = fontSize; } else if (barrage.y > canvas.height - fontSize) { barrage.y = canvas.height - fontSize; } barrage.moveX = 1 + Math.random() * 3; } // 依据新地位绘制圆圈圈 store[index].draw(); } }; // 画布渲染 var render = function () { // 革除画布 context.clearRect(0, 0, canvas.width, canvas.height); // 绘制画布上所有的圆圈圈 draw(); // 持续渲染 requestAnimationFrame(render); }; render(); }; canvasBarrage('#canvasBarrage', dataBarrage); </script>