简单的Canvas弹幕效果(1)

0.12字数 213阅读 730

实现弹幕效果,看到B站有两种方法,一种是dom + css3,一种是canvas。

先把基本的dom结构写好:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .video-wrapper {
        position: relative;
        width: 640px;
        margin: auto;
    }

    #canvasBarrage {
        position: absolute;
        width: 640px;
        height: 360px;
    }

    .video-placeholder {
        height: 360px;
        animation: bgColor 10s infinite alternate;
    }

    @keyframes bgColor {
        25% {
            background-color: darkred;
        }
        50% {
            background-color: darkgreen;
        }

        100% {
            background-color: darkblue;
        }
    }
    </style>
</head>

<body>
    <div class="video-wrapper">
        <canvas id="canvasBarrage"></canvas>
        <div class="video-placeholder"></div>
    </div>
</body>
</html>

然后定义一个方法,传入canvas上下文和弹幕数据:

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 data = [
  '使用的是静态数据',
  '随机循环播放',
  '可以控制区域和垂直分布范围',
  '字体大小和速度在方法内设置',
]

canvasBarrage('#canvasBarrage', data);

一下代码都是写在canvasBarrage这个函数中的。每一条弹幕,都是一个对象,我们要封装到一个构造函数中:

        function Barrage(text, index) {
            // 随机x坐标也就是横坐标,对于y纵坐标,以及变化量speed
            this.x = canvas.width;
            this.y = canvas.height * Math.random();
            this.speed = 2;

            this.opacity = 0.8;
            this.text = text;
            this.color = 'red';
            this.fontSize = 28;
        };

        Barrage.prototype.draw = function() {
            var text = this.text;
            // 根据此时x位置绘制文本
            context.strokeStyle = this.color;
            context.font = `bold  ${this.fontSize}px "microsoft yahei", sans-serif`;
            context.fillStyle = `rgba(255,255,255, ${this.opacity})`;
            context.fillText(text, this.x, this.y);
            context.strokeText(text, this.x, this.y);
        }

弹幕对象有坐标x,y,移动速度,透明度,文本,颜色,字号这些属性,还有一个方法,将弹幕绘制到画布上。

接下来就是将弹幕实例化,存储到store,然后遍历store,调用改变弹幕的位移,并调用其draw方法绘制,使其移动:

        var store = {};
        data.forEach((item, i) => {
            store[i] = new Barrage(item, i);
        });

        // 绘制弹幕文本
        var drawAll = function() {
            for (var i in store) {
                var barrage = store[i];
                // 位置变化
                barrage.x -= barrage.speed;
                store[i].draw();
            }
        }; 

最后,使用一个方法启动:

        var render = function() {
            // 清除画布
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawAll();
            requestAnimationFrame(render);
        };

        render(); 

推荐阅读更多精彩内容