HTML5 canvas实现的静态循环滚动播放弹幕实例页面

展示

代码

HTML代码：

<canvas id="canvasBarrage"></canvas>

JS代码：

// 弹幕数据
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]
}...}];

var canvasBarrage = function (canvas, data) {	
    // 参见页面源代码
}
canvasBarrage('#canvasBarrage', dataBarrage);