Verwenden Sie H5-Leinwand, um einen Sperreffekt zu erzielen

Dieses Mal stelle ich Ihnen die Verwendung von H5-Leinwand zum Erzeugen von Sperreffekten vor. Was sind die Vorsichtsmaßnahmen für die Verwendung von H5-Leinwand zum Erzeugen von Sperreffekten?

Leinwandwissen

Zeichnungstext

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坐标

Textbreite

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

Zeichnungsinhalte klarstellen

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

Implementierungsschritte

1. Erstellen Sie ein Canvas--Element und verwenden Sie absolute Positionierung , um das Video abzudecken.
2. Erstellen Sie eine Barrage-Klasse und speichern Sie das hinzugefügte Barrage-Element in der Barrage-Liste . Und notieren Sie die entsprechenden Sperrinformationen
3. Zeichnen Sie den Sperrtext und verwenden Sie den Textversatz, um die Bewegungsgeschwindigkeit zu steuern
Berechnen Sie, wann der Text die Leinwand überschreitet und verschieben Sie ihn aus der Sperrliste

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);
    })
})();

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema php Chinesische Website!

Empfohlene Lektüre:

SVG-Animation in der Frontend-Entwicklung

Wie man mit Spezialeffekten ein Trümmerfeuerwerk mit schwarzem Hintergrund erstellt auf Leinwand

Das obige ist der detaillierte Inhalt vonVerwenden Sie H5-Leinwand, um einen Sperreffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!