Este artículo presenta el código de muestra del componente de cuenta regresiva del anillo de lienzo y lo comparte con todos. Los detalles son los siguientes:
El efecto es como se muestra en la Figura 1:
Componente de cuenta regresiva del anillo de lienzoLa cuenta regresiva del anillo de Canvas es una cuenta regresiva implementada en base a Canvas y se recomienda su uso en dispositivos móviles.
Dirección de descarga de cuenta regresiva del anillo de lienzo
1. Cómo utilizar1. código html
El atributo ID se puede nombrar arbitrariamente
<canvas id=canvas></canvas>
2. Introduzca el archivo Process.js
Referencia de página
<script src=js/process.js></script>
3. Parámetros de inicialización
Simplemente crea una instancia
<script> window.onload = function () { let ctd = new Countdown(); ctd.init() };</script> 2. Descripción de los parámetros de configuración.Los siguientes parámetros no son necesarios y se pueden configurar según las necesidades específicas.
window.onload = function () { let ctd = new Countdown(); ctd.init({ id: lienzo, // ID, el lienzo debe tener un tamaño de atributo de ID: 130, // El tamaño máximo para dibujar un círculo, ancho = Borde altoAncho: 4, // Ancho del borde bordeColor: #fff, // Color del borde exteriorColor: #fff, // Color del círculo inferior más externo ScheduleColor: #fff, // Color de animación de la barra de progreso fontColor: #fff, // Color de fuente ringColor: #ffc720, // Color del anillo de la barra de progreso insideColor: #4e84e5, // Color de fondo del círculo interior tamaño de fuente: 50, tiempo: 5 }); 3. Código de muestraHTML
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Título</title> <estilo> cuerpo { fondo: #c2c1ce } .container { posición: absoluta; 50%; arriba: 50%; transformar: traducir (-50%, -50%); ancho: 130px alto: 130px; centro; } </style></head><body><div class=container> <canvas class=canvas id=canvas></canvas></div><script src=js/process.js></script ><script> window.onload = function () { let ctd = new Countdown(); ctd.init() };</script></body></html>;js
/** * Creado por Tan Xi el 15/3/2018 */function Countdown() { // Establece los parámetros predeterminados this.settings = { id: lienzo, // ID, el lienzo debe tener un tamaño de atributo de ID: 130, // El tamaño máximo para dibujar un círculo, ancho = alto borderWidth: 4, // Ancho del borde borderColor: #fff, // Color del borde externalColor: #fff, // Color del círculo inferior exterior ScheduleColor: #fff, // color de la animación de la barra de progreso fontColor: #fff, // color de la fuente ringColor: #ffc720, // color del anillo de la barra de progreso internalColor: #4e84e5, // color de fondo del círculo más interno fontSize: 50, tiempo: 5 }}Countdown.prototype.init = función (opt) { this.obj = document.getElementById(this.settings.id); this.obj.width = this.settings.size; this.obj.height = this.settings.size; this.ctx = this.obj.getContext(2d); this.settings, opt); this.countdown();};//Dibuja el color de fondo Countdown.prototype.drawBackground = function () { this.drawCircle(0, 360, 0, this.settings.outerColor);};// Dibujar el fondo de animación de la barra de progreso Countdown.prototype.drawProcess = function () { this.drawCircle(0, 360, 4, this.settings.ringColor);};/ / Dibujar cuenta regresiva Countdown.prototype.drawInner = function () { this.drawCircle(0, 360, 23, this.settings.innerColor); this.strokeBorder(this.settings.borderWidth);};// Dibujar animación de la barra de progreso Countdown.prototype.drawAnimate = function () { // Ángulo de rotación let deg = Math.PI / 180; v = horario * 360, startAng = -90, endAng = -90 + v this.ctx.beginPath(); this.ctx.moveTo(this.settings.size / 2, this.settings.size / 2, this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size); / 2 -3, startAng * grados, endAng * grados, false); this.ctx.closePath();};// Dibuja el borde Countdown.prototype.strokeBorder = function (borderWidth) { this.ctx.lineWidth = borderWidth; this.ctx.strokeStyle = this.settings.borderColor; trazo ();};// Dibujar texto Countdown.prototype.strokeText = function (texto) { this.ctx.textAlign = center; this.ctx.textBaseline = medio; this.ctx.font = this.settings.fontSize+px+ microsoft yahei; this.ctx.fillStyle = this.settings.fontColor; 2, this.settings.size / 2);};// Dibuja un círculo Countdown.prototype.drawCircle = función (startAng, endAng, borde, fillColor) { let deg = Math.PI / 180; this.ctx.beginPath(); this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 -borde, startAng * grados, endAng * grados, falso); this.ctx.fillStyle = fillColor; this.ctx.closePath();};//Animación de la barra de progreso Countdown.prototype.countdown = function () { let oldTime = +new Date(); timer = setInterval(() => { let allMs = this.settings. hora * 1000,// Por ejemplo, 30*1000=30 000ms hora actual = +nueva fecha(); Tamaño del paso = (hora actual - hora pasada) / número total de segundos horario = (tiempo actual - tiempo anterior) / allMs; this.schedule = horario; this.drawAll(horario); Redibujar this.drawBackground(); this.drawProcess(); this.drawAnimate(); this.drawInner(); clearInterval(timer); } }, 100);};// Dibujar todo Countdown.prototype.drawAll = function (horario) { horario = horario >= 1: horario let text = parseInt(this.settings.time * (1 - programar)) + 1; // Limpiar el lienzo this.ctx.clearRect(0, 0, this.settings.size, this.settings.size); this.drawBackground(); this.drawProcess(); this.drawAnimate(); this.drawInner(); this.strokeText(text);};// Función de copia de objeto extend(obj1,obj2){ for(let attr in obj2){ obj1[atributo] = obj2[atributo] }} 4. Trabajo de preparación del lienzo adicionalDe hecho, el lienzo no es tan misterioso. No es más que una etiqueta H5, al igual que otras etiquetas HTML:
<canvas id=canvas></canvas>
Tenga en cuenta que es mejor establecer el ancho y el alto del lienzo al principio (si no establece el ancho y el alto, el navegador establecerá de forma predeterminada el tamaño del lienzo en 300 píxeles de ancho y 100 píxeles de alto), y no puede se puede configurar usando css (se extraerá la extensión), se recomienda escribir directamente dentro de la etiqueta del lienzo:
<id del lienzo=ancho del lienzo=130 alto=130></canvas>
Canvas en sí no tiene ninguna capacidad de dibujo y todo el trabajo de dibujo se implementa a través de js. Por lo general, usamos getElementById en js para operar el lienzo (esto significa que tenemos que establecer una identificación para el lienzo):
var c = document.getElementById(lienzo);var ctx = c.getContext(2d);
1. Después de preparar el pincel, puede comenzar a dibujar. Los anillos son en realidad círculos concéntricos con diferentes radios. Las coordenadas centrales son (tamaño/2, tamaño/2). Primero dibuje el círculo inferior de fondo blanco más grande con un radio de tamaño/2. .
let deg = Math.PI / 180; // comenzarPath() puede aislar el efecto de dibujo de la ruta y evitar que los efectos anteriores se contaminen. ctx.beginPath();// tcx.arc(centro del círculo grados, 360 * grados, falso);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();
2. Comience a dibujar el segundo círculo inferior amarillo, el centro del círculo también es (tamaño/2, tamaño/2), pero el radio es 4px más pequeño que el círculo inferior blanco, por lo que el radio del círculo inferior amarillo es (tamaño /2-4)
let deg = Math.PI / 180; // comenzarPath() puede aislar el efecto de dibujo de la ruta y evitar que los efectos anteriores se contaminen. ctx.beginPath();//tcx.arc(centro del círculo 0* grados, 360 * grados, falso);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();
3. Comience a dibujar un círculo interior azul, con el centro del círculo en (tamaño/2, tamaño/2) y el radio en (tamaño-23), y luego agréguele un borde blanco de 4px.
let deg = Math.PI / 180; // comenzarPath() puede aislar el efecto de dibujo de la ruta y evitar que los efectos anteriores se contaminen. ctx.beginPath();// tcx.arc(centro del círculo 0* grados, 360 * grados, falso);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();// Borde blanco ctx.lineWidth = 4;ctx.strokeStyle = #fff;ctx.stroke();
4. Dibuja texto y céntralo verticalmente.
ctx.textAlign = center;ctx.textBaseline = middle;ctx.fillStyle = #fff;// ctx.fillText (texto, coordenada X relativa al lienzo, coordenada Y relativa al lienzo) ctx.fillText(30, tamaño / 2 , tamaño / 2);
5. ¿Cómo crear animación? De hecho, también es un proceso de dibujar un círculo blanco, un proceso de cubrir lentamente la barra de progreso amarilla. Luego, primero dibuje el círculo blanco, el círculo azul quedará cubierto por el círculo animado blanco. , se dibujará el último círculo azul.
let deg = Math.PI / 180;ctx.beginPath();// tcx.arc(centro del círculo X, centro del círculo Y, radio, ángulo inicial, ángulo final, en sentido horario y antihorario);ctx.arc(tamaño / 2, tamaño / 2, tamaño / 2-4, 0* grados, 360 * grados, falso);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();
6. Se completa el proceso de pintura relativamente simple. A continuación, debemos asociar la animación con los números usando la última hora actual, la primera vez, y luego dividiendo el tiempo total, podemos obtener un porcentaje clave. cambio de los números y el ángulo en el que se dibuja el círculo animado blanco.
Countdown.prototype.countdown = function () { let oldTime = +new Date(); // Hora pasada: 1522136419291 timer = setInterval(() => { let currentTime = +new Date(); // Hora actual: 1522136419393 let allMs = this.settings.time * 1000;// Tiempo total en segundos: como 30*1000=30 000ms horario = (tiempo actual - tiempo antiguo) / allMs;// Porcentaje de dibujo: (1522136419393-1522136419291)/30000=0.0204 this.schedule = Schedule this.drawAll(schedule); if (HoraActual - HoraAntigua >= todasMs) { // Redibujar this.drawBackground(); this.drawProcess(); this.drawAnimate(); this.drawInner(); this.strokeText(0); clearInterval(timer); .prototype.drawAll = función (programación) { programación = programación>= 1: programación let text = parseInt(this.settings.time * (1) - programar)) + 1; // Borrar el lienzo this.ctx.clearRect(0, 0, this.settings.size, this.settings.size); this.drawProcess(); ( ); this.drawInner(); this.strokeText(text);};// Dibujar animación de la barra de progreso Countdown.prototype.drawAnimate = function () { // Ángulo de rotación let deg = Math.PI / 180; let v = horario * 360, startAng = -90,//Ángulo inicial endAng = -90 + v;//Ángulo final this.ctx.beginPath(); .size / 2, this.settings.size / 2); this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 - 3, startAng * grados, endAng * grados, false); this.ctx.fillStyle = this.settings.scheduleColor; this.ctx.fill(); ;Versión orientada a procesos
/** * Animación de la barra de progreso*/ cuenta regresiva: función () { this.getSystemInfo().then(v => { // Ancho de let adaptable = v.windowWidth, tamaño = ancho >= 414? 66: 400/414 * 66; tamaño = parseInt(tamaño); tamaño = tamaño % 2 ? tamaño + 1: tamaño; let maxtime =30, sTime = +nueva fecha, temp = setInterval(() => { let time = maxtime * 1000, currentTime = +nueva Fecha, programación = (currentTime - sTime) / hora; this.drew(programa, maxtime, tamaño); if (currentTime - sTime >= hora ) { // Dibujar texto this.setData({ horario: 0 }); clearInterval(temp } }, 100 }); dibujar*/dibujo: función (horario, valor, tamaño) { tamaño = tamaño || 66; const _ts = esto; horario = horario >= 1: horario let text = parseInt(val - val * horario), r? = tamaño / 2, grados = Math.PI / 180; _ts.setData({ ancho: tamaño, alto: tamaño, horario: texto + 1 }); Limpiar el lienzo ctx.clearRect(0, 0, size, size); // Dibuja un fondo blanco ctx.beginPath(); = 'rgba(255,255,255,1)'; ctx.closePath(); Dibujar naranja ctx.beginPath(); ctx.arc(r, r, r - 2, 0 * grados, 360 * grados); ctx.fillStyle = 'rgba(248,200,80,1)'; ctx.fill(); // Dibuja una barra de progreso blanca let v = Schedule * 360; ctx.moveTo(r, r); ctx.arc(r, r, r, -90 * grados, (-90 + v) * grados); ctx.fillStyle = 'rgba(255,255,255,1)'; (); ctx.fill(); // Centro fondo azul ctx.beginPath(); r - 12, 0 * grados, 360 * grados); ctx.fillStyle = 'rgba(90,140,220,1)'; ctx.closePath(); ctx.fill() // Dibujar texto ctx.strokeText(); Dibujo unificado ctx.draw(); },Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.