Utilisez la toile H5 pour créer un effet de barrage

Cette fois je vais vous présenter l'utilisation du canevas H5 pour créer des effets de barrage. Quelles sont les précautions pour utiliser le canevas H5 pour créer des effets de barrage. Voici un cas pratique, jetons un oeil.

Connaissance du canevas

Texte dessiné

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

Largeur du texte

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

Contenu clair du dessin

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

Étapes de mise en œuvre

1. Créez un élément de canevas et utilisez le positionnement absolu pour couvrir la vidéo
2. Créez une classe Barrage et mettez en cache le barrage ajouté dans la liste des barrages. . Et enregistrez les informations de barrage correspondantes
3. Dessinez le texte du barrage et utilisez le décalage du texte pour contrôler la vitesse de déplacement
4 Calculez quand le texte dépasse la toile et déplacez-le hors de la liste des barrages

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le. php site chinois !

Lecture recommandée :

Animation SVG dans le développement front-end

Comment créer un fond noir avec des feux d'artifice de débris d'effets spéciaux en toile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!