Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to achieve static cyclic rolling screenings in HTML5. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Usage and API

The syntax is as follows:

CanvasBarrage (canvas, data)

Where:

Canvas

Canvas represents our canvas element, which can be either a DOM element or a selector for canvas elements.

Data

Data represents on-screen comment data, which is an array. For example:

[{value:'on-screen comment 1, color: 'blue', range: [0,0.5]}, {value:' on-screen comment 2, color: 'red', range: [0.5,1]}]

You can see that each value in the array represents an information object for a barrage. Value represents the text content of the on-screen comment; color represents the color of the on-screen comment stroke (the text itself is white by default); range represents the area range of the on-screen comment in the canvas, for example, [0,0.5] indicates that the upper part of the barrage is displayed in the canvas, and [0.5,1] represents the lower half of the canvas.

Then you can see the infinitely scrolling barrage effect.

Supplementary note:

The default text size for this on-screen comment effect is 28px, and the text is bold. If this effect does not meet your needs, you need to modify the source code in the canvasBarrage () method. Because it is a simple static effect, it is not specifically designed as API.

This barrage effect defaults to white text plus variable color strokes. Similarly, if this effect does not meet your needs, you need to modify the source code in the canvasBarrage () method.

Unlike the real barrage effect, the speed and timing of the barrage here are not based on a specific time, but at random. So when I see some words, they seem to be flying airplanes, while others seem to be sitting on tractors. Because it is dead data, the design will look more authentic.

Source code: .video-x {position: relative; width: 640px; margin: auto;}. Canvas-barrage {position: absolute; width: 640px; height: 360px;} .video-placeholder {height: 360px; background-color: # 000; animation: bgColor 10s infinite alternate } @ keyframes bgColor {25% {background-color: darkred;} 50% {background-color: darkgreen;} 75% {background-color: darkblue;} 100% {background-color: sliver }} / / on-screen comment data var dataBarrage = [{value: 'static dead data is used', color: 'blue', range: [0,0.5]}, {value:' random loop' Color: 'blue', range: [0,0.6]}, {value:' region and vertical distribution can be controlled', color: 'blue', range: [0,0.5]}, {value:' font size and speed are set within the method' Color: 'black', range: [0.1,1]}, {value:' suitable for some static pages', color: 'black', range: [0.2,1]}, {value:' implementation based on canvas', color: 'black' Range: [0.2,0.9]}, {value: 'that's why IE9+ browsers support', color: 'black', range: [0.2,1]}, {value:' border color can be set', color: 'black', range: [0.2 1]}, {value: 'text colors are all white by default', color: 'black', range: [0.2,0.9]}, {value:' if text colors don't want to be white', color: 'black', range: [0.2,1]} {value: 'need to adjust JS', color:' black', range: [0.6,0.7]}, {value:'if you need real and video interactive on-screen comment', color: 'black', range: [0.2,1]} {value: 'you can go back to the original', color: 'black', range: [0,0.9]}, {value:' view another demo', color: 'black', range: [0.7,1]} {value: 'here is the space-occupying barrage', color: 'black', range: [0.7,0.95]}, {value:' high-energy warning ahead!' , color: 'orange', range: [0.5,0.8]}, {value:' high energy warning ahead!!' , color: 'orange', range: [0.5,0.9]}, {value:' high energy warning ahead!!' , color: 'orange', range: [0,1]}, {value:' high energy warning ahead!!' , color: 'orange', range: [0,1]}]; / / on-screen comment method var canvasBarrage = function (canvas, data) {if (! canvas | |! data | |! data.length) {return } if (typeof canvas = = 'string') {canvas = document.querySelector (canvas); canvasBarrage (canvas, data); return;} var context = canvas.getContext (' 2d'); canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight / / Storage instance var store = {}; / / Font size var fontSize = 28 / / instance method var Barrage = function (obj, index) {/ / Random x coordinate is Abscissa, for y ordinate and variation moveX this.x = (1 + index * 0.1 / Math.random ()) * canvas.width This.y = obj.range [0] * canvas.height + (obj.range [1]-obj.range [0]) * canvas.height * Math.random () + 36; if (this.y

< fontSize) { this.y = fontSize; } else if (this.y >

Canvas.height-fontSize) {this.y = canvas.height-fontSize;} this.moveX = 1 + Math.random () * 3; this.opacity = 0.8 + 0.2 * Math.random (); this.params = obj This.draw = function () {var params = this.params; / / draw the text context.strokeStyle = params.color; context.font = 'bold' + fontSize +'px "microsoft yahei", sans-serif' according to this x position Context.fillStyle = 'rgba (255, this.x, this.y); context.strokeText (params.value, this.x, this.y);};} Data.forEach (function (obj, index) {store [index] = new Barrage (obj, index);}); / / draw on-screen comment var draw = function () {for (var index in store) {var barrage = store [index] / / position change barrage.x-= barrage.moveX; if (barrage.x

< -1 * canvas.width * 1.5) { // 移动到画布外部时候从左侧开始继续位移 barrage.x = (1 + index * 0.1 / Math.random()) * canvas.width; barrage.y = (barrage.params.range[0] + (barrage.params.range[1] - barrage.params.range[0]) * Math.random()) * canvas.height; if (barrage.y < fontSize) { barrage.y = fontSize; } else if (barrage.y >

Canvas.height-fontSize) {barrage.y = canvas.height-fontSize;} barrage.moveX = 1 + Math.random () * 3;} / / draw the circle according to the new position }}; / / canvas rendering var render = function () {/ / clear canvas context.clearRect (0,0, canvas.width, canvas.height); / / draw all circles on the canvas draw () / / continue rendering requestAnimationFrame (render);}; render ();}; canvasBarrage ('# canvasBarrage', dataBarrage) This is the end of the article on "how to achieve static cyclic scrolling on the bullet screen in HTML5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.