Este artigo apresenta o código de exemplo do componente de contagem regressiva do anel de tela e o compartilha com todos. Os detalhes são os seguintes:
O efeito é mostrado na Figura 1:
Componente de contagem regressiva do anel de telaA contagem regressiva do anel do Canvas é uma contagem regressiva implementada com base no Canvas e é recomendada para uso em dispositivos móveis.
Endereço de download da contagem regressiva do anel de tela
1. Como usar1. código HTML
O atributo ID pode ser nomeado arbitrariamente
<canvas id=canvas></canvas>
2. Introduzir o arquivo process.js
Referência de página
<script src=js/process.js></script>
3. Parâmetros de inicialização
Basta instanciar
<script> window.onload = function () { let ctd = new Countdown(); 2. Descrição dos parâmetros de configuraçãoOs seguintes parâmetros não são obrigatórios e podem ser configurados de acordo com necessidades específicas.
window.onload = function () { let ctd = new Countdown();{ id: canvas, // ID, canvas deve ter o atributo ID size: 130, // O tamanho máximo para desenhar um círculo, width = High borderWidth: 4, // Largura da borda borderColor: #fff, // Cor da borda outerColor: #fff, // Cor do círculo inferior mais externo cronogramaColor: #fff, // Cor da animação da barra de progresso fontColor: #fff, // Cor da fonte ringColor: #ffc720, // Cor do anel da barra de progresso innerColor: #4e84e5, // Cor de fundo do círculo mais interno fontSize: 50, time: 5 } }); 3. Exemplo de códigoHTML
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Título</title> <style> body { background: #c2c1ce } .container { posição: esquerda absoluta: 50%; superior: 50%; transformar: traduzir (-50%, -50%); center; } </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();js
/** * Criado por Tan Xi em 15/03/2018 */function Countdown() { // Defina os parâmetros padrão this.settings = { id: canvas, // ID, canvas deve ter tamanho de atributo de ID: 130, // O tamanho máximo para desenhar um círculo, largura = altura borderWidth: 4, // Largura da borda borderColor: #fff, // Cor da borda outerColor: #fff, // Círculo inferior externo cronogramaColor: #fff, // cor da animação da barra de progresso fontColor: #fff, // cor da fonte ringColor: #ffc720, // cor do anel da barra de progresso innerColor: #4e84e5, // cor de fundo do círculo mais interno fontSize : 50, tempo: 5 }}Countdown.prototype.init = function (opt) { this.obj = document.getElementById(this.settings.id); this.obj.width = this.settings.size; this.obj.height = this.settings.size; this.settings, opt); this.countdown();};//Desenhe a cor de fundo Countdown.prototype.drawBackground = function () { this.drawCircle(0, 360, 0, this.settings.outerColor);};// Desenha o fundo da animação da barra de progresso Countdown.prototype.drawProcess = function () { this.drawCircle(0, 360, 4, this.settings.ringColor);};/ / Desenhar contagem regressiva Countdown.prototype.drawInner = function () { this.drawCircle(0, 360, 23, this.settings.innerColor); this.strokeBorder(this.settings.borderWidth);};// Desenhar animação da barra de progresso Countdown.prototype.drawAnimate = function () { // Ângulo de rotação let deg = Math.PI / 180; v = agendamento * 360, startAng = -90, endAng = -90 + v; 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); / 2 -3, startAng * deg, endAng * deg, false); this.ctx.fillStyle = this.settings.scheduleColor; this.ctx.closePath();};//Desenhe a borda Countdown.prototype.strokeBorder = function (borderWidth) { this.ctx.lineWidth = borderWidth; acidente vascular cerebral ();};// Desenhar texto Countdown.prototype.strokeText = function (texto) { this.ctx.textAlign = center; this.ctx.textBaseline = middle; this.ctx.font = this.settings.fontSize+px+ microsoft yahei; this.ctx.fillStyle = this.settings.fontColor; 2, this.settings.size / 2);};// Desenha um círculo Countdown.prototype.drawCircle = function (startAng, endAng, borda, fillColor) { let deg = Math.PI / 180; this.ctx.beginPath(); this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 -border, startAng * deg, endAng * deg, false); this.ctx.closePath();};//Animação da barra de progresso Countdown.prototype.countdown = function () { let oldTime = +new Date(); time * 1000,// Por exemplo, 30*1000=30 000ms currentTime = +new Date(); Tamanho do passo = (tempo atual - tempo passado) / número total de segundos agendamento = (tempoatual - horário antigo) / allMs; this.schedule = agendamento; this.drawAll(schedule); Redesenhar this.drawBackground(); this.drawProcess(); clearInterval(timer); } }, 100);};// Desenhar tudo Countdown.prototype.drawAll = function (schedule) { agendamento = agendamento >= 1 ? 1 : agendamento let text = parseInt(this.settings.time * (1 - agendamento)) + 1; // Limpa a tela this.ctx.clearRect(0, 0, this.settings.size, this.settings.size); this.drawBackground(); this.drawProcess(); this.drawAnimate(); this.strokeText(text);};//função de cópia de objeto extend(obj1,obj2){ for(let attr in). obj2){ obj1[atributo] = obj2[atributo] }} 4. Trabalho de preparação de tela adicionalNa verdade, canvas não é tão misterioso. Nada mais é do que uma tag H5, assim como outras tags HTML:
<canvas id=canvas></canvas>
Observe que é melhor definir a largura e a altura da tela no início (se a largura e a altura não forem definidas, o navegador definirá o tamanho da tela como padrão para 300 pixels de largura e 100 pixels de altura), e não pode ser definido usando css (será puxada a extensão), é recomendado escrever diretamente dentro da tag canvas:
<canvas id=largura da tela=130 altura=130></canvas>
O Canvas em si não possui recursos de desenho e todo o trabalho de desenho é implementado por meio de js. Normalmente usamos getElementById em js para fazer com que o canvas seja operado (isso significa que temos que definir um id para o canvas):
var c = document.getElementById(canvas);var ctx = c.getContext(2d);
1. Depois de preparar o pincel, você pode começar a desenhar os anéis que são, na verdade, círculos concêntricos com raios diferentes. As coordenadas centrais são (tamanho/2, tamanho/2). .
let deg = Math.PI / 180; // BeginPath() pode isolar o efeito de desenho do caminho e evitar que os efeitos anteriores sejam contaminados. ctx.beginPath();// tcx.arc(círculo centro grau, 360 * graus, falso);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();
2. Comece a desenhar o segundo círculo inferior amarelo, o centro do círculo também é (tamanho/2, tamanho/2), mas o raio é 4px menor que o círculo inferior branco, então o raio do círculo inferior amarelo é (tamanho /2-4)
let deg = Math.PI / 180; // BeginPath() pode isolar o efeito de desenho do caminho e evitar que os efeitos anteriores sejam contaminados. ctx.beginPath();//tcx.arc(centro do círculo 0* graus, 360 * graus, falso);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();
3. Comece a desenhar um círculo interno azul, com o centro do círculo sendo (tamanho/2,tamanho/2) e o raio sendo (tamanho 23), e então adicione uma borda branca de 4px a ele.
let deg = Math.PI / 180; // BeginPath() pode isolar o efeito de desenho do caminho e evitar que os efeitos anteriores sejam contaminados. ctx.beginPath();// tcx.arc(centro do círculo 0* graus, 360 * graus, falso);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();// Borda branca ctx.lineWidth = 4;ctx.strokeStyle = #fff;ctx.stroke();
4. Desenhe o texto e centralize-o verticalmente
ctx.textAlign = center;ctx.textBaseline = middle;ctx.fillStyle = #fff;// ctx.fillText (texto, coordenada X relativa à tela, coordenada Y relativa à tela) ctx.fillText(30, tamanho / 2 , tamanho/2);
5. Como criar animação? Na verdade, é também um processo de desenhar um círculo branco, um processo de cobrir lentamente a barra de progresso amarela. Nesse momento, desenhe primeiro o círculo azul. , o último círculo azul será desenhado corretamente.
deixe deg = Math.PI / 180;ctx.beginPath();// tcx.arc(centro do círculo X, centro do círculo Y, raio, ângulo inicial, ângulo final, sentido horário e anti-horário);ctx.arc(tamanho / 2, tamanho / 2, tamanho / 2-4, 0* graus, 360 * graus, falso);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();
6. O processo de pintura relativamente simples é concluído. Em seguida, precisamos associar a animação aos números. Usando o horário mais recente - o horário mais antigo, e então dividindo o tempo total, podemos obter uma porcentagem chave. mudança dos números e do ângulo em que o círculo animado branco é desenhado.
Countdown.prototype.countdown = function () { let oldTime = +new Date(); // Hora passada: 1522136419291 timer = setInterval(() => { let currentTime = +new Date(); // Hora atual: 1522136419393 let allMs = this.settings.time * 1000;// Tempo total em segundos: como 30*1000=30 000ms agendamento = (currentTime - oldTime) / allMs; // Porcentagem de desenho: (1522136419393-1522136419291) / 30000 = 0,0204 this.schedule = agendamento this.drawAll(schedule); if (tempoatual - tempo antigo >= allMs) { // Redesenhar this.drawBackground(); this.drawProcess(); this.drawAnimate(); // Desenhar tudo Countdown(0); .prototype.drawAll = function (agendar) { agendar = agendar >= 1 : agendar let text = parseInt(this.settings.time * (1; - agendamento)) + 1; // Limpa a tela this.ctx.clearRect(0, 0, this.settings.size, this.settings.size); ( ); this.drawInner(); this.strokeText(text);};// Desenha a animação da barra de progresso Countdown.prototype.drawAnimate = function () { // Ângulo de rotação let deg = Math.PI / 180; deixe v = cronograma * 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 * deg, endAng * deg, false); this.ctx.fillStyle = this.settings.scheduleColor; ;Versão orientada ao processo
/** * Animação da barra de progresso*/ contagem regressiva: function () { this.getSystemInfo().then(v => { // Adaptável let width = v.windowWidth, size = width >= 414 ? 66 : 400/414 * 66; tamanho = parseInt(tamanho); tamanho = tamanho % 2 ? tamanho + 1 : tamanho máximo =30, sTime = +nova data, temp; = setInterval(() => { let time = maxtime * 1000, currentTime = +new Date, agendamento = (currentTime - sTime) / time; this.drew(schedule, maxtime, size); if (currentTime - sTime >= time ) { // Desenha texto this.setData({ agenda: 0 }); desenhar*/ desenhar: função (programação, val, tamanho) { tamanho = tamanho || const _ts = this; = tamanho / 2, deg = Math.PI / 180 _ts.setData({ largura: tamanho, altura: tamanho, programação: texto + 1 }); Limpe a tela ctx.clearRect(0, 0, size, size); // Desenha um fundo branco ctx.beginPath(); = ' rgba(255,255,255,1)'; Desenhe laranja ctx.beginPath(); ctx.fill(); // Desenha uma barra de progresso branca let v = agendamento * 360; ctx.moveTo(r, r); (); ctx.fill(); // Centralizar fundo azul ctx.beginPath(); r - 12, 0 * graus, 360 * graus); // Desenhar texto ctx.strokeText(); Desenho unificado ctx.draw() },O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.