Maison > interface Web > Tutoriel H5 > le corps du texte

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

php中世界最好的语言
Libérer: 2018-03-13 16:35:34
original
4160 Les gens l'ont consulté

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坐标
Copier après la connexion

Largeur du texte

ctx.measureText('文本宽度').width
Copier après la connexion

Contenu clair du dessin

ctx.clearRect(0, 0, width, height);
Copier après la connexion

É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);
    })
})();
Copier après la connexion

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

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal