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