Use H5 canvas to create barrage effect-H5 Tutorial-php.cn

Use H5 canvas to create barrage effect

php中世界最好的语言

Release： 2018-03-13 16:35:34

Original

4155 people have browsed it

This time I will show you how to use H5 canvas to create barrage effects. What are the things to note? Here are actual cases, let’s take a look.

canvas knowledge

Drawing text

let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');ctx.font = '20px Microsoft YaHei';          //字体、大小ctx.fillStyle = '#000000';                  //字体颜色ctx.fillText('canvas 绘制文字', 100, 100);   //文本，字体x,y坐标

Copy after login

Text width

ctx.measureText('文本宽度').width

Copy after login

Clear drawing content

ctx.clearRect(0, 0, width, height);

Copy after login

implementation steps

Create a canvas element and use absolute positioning to cover the video2. Create a Barrage class, cache the added barrage into the barrage list, and record the corresponding barrage information
3. Draw the barrage text and use the text offset to control the movement speed
4. Calculate when the text exceeds the canvas and move it out of the barrage list

Code

//html<div>
    <video>
        <source></source>
        <source></source> 
        Your browser does not support the video tag.
    </video>
    <canvas>
        您的浏览器不支持canvas标签。
    </canvas>
</div>//js(function () {    class Barrage {
        constructor(canvas) {
            this.canvas = document.getElementById(canvas);
            let rect = this.canvas.getBoundingClientRect();
            this.w = rect.right - rect.left;
            this.h = rect.bottom - rect.top;
            this.ctx = this.canvas.getContext('2d');
            this.ctx.font = '20px Microsoft YaHei';
            this.barrageList = [];
        }        //添加弹幕列表
        shoot(value) {
            let top = this.getTop();
            let color = this.getColor();
            let offset = this.getOffset();
            let width = Math.ceil(this.ctx.measureText(value).width);
            let barrage = {
                value: value,
                top: top,
                left: this.w,
                color: color,
                offset: offset,
                width: width
            }
            this.barrageList.push(barrage);
        }        //开始绘制
        draw() {            if (this.barrageList.length) {
                this.ctx.clearRect(0, 0, this.w, this.h);                for (let i = 0; i  {
        barrage.shoot(t);
    })
})();

Copy after login

Use H5 canvas to create barrage effect

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!