renderizações finais1. Defina variáveis
Defina o raio, defina a espessura do anel, defina a posição central do círculo e defina a cor de preenchimento padrão
deixe raio = 75let espessura= 10let innerRadius = raio - espessuralet x = 75let y = 75var canvas = document.getElementById('tutorial');var ctx = canvas.getContext('2d');ctx.fillStyle = #f2d7d7; 2. Desenhe o primeiro arco ctx.beginPath();ctx.arc(x, y, raio, Math.PI * 1,5, Math.PI)
Preste atenção ao método BeginPath(), o primeiro passo para gerar um caminho. Essencialmente, um caminho é composto de muitos subcaminhos, todos em uma lista, e todos os subcaminhos (linhas, arcos, etc.) formam uma forma. Cada vez que esse método é chamado, a lista é limpa e redefinida, e então podemos redesenhar um novo gráfico.
Em outras palavras, este método pode ser utilizado para agrupar imagens do Canvas e desenhar novos gráficos. Se este método não for chamado, os novos gráficos serão conectados aos gráficos anteriores.
3. Desenhe a primeira conexãoctx.quadraticCurveTo((x - innerRadius) - espessura / 2, y - espessura, x - innerRadius, y)
A conexão é desenhada usando uma curva quadrática de Bézier O método quadraticCurveTo(cp1x, cp1y, x, y) do Canvas aceita 4 parâmetros. O primeiro e o segundo parâmetros são os pontos de controle, e o terceiro e o quarto parâmetros são as extremidades. o documento oficial
Basta descobrir os pontos de controle e finais para desenhar um arco
4. Desenhe o segundo arcoctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1,5, verdadeiro)
Preste atenção ao último parâmetro após o método Defina-o como verdadeiro, o que significa desenhar no sentido anti-horário (o padrão é no sentido horário).
5. Desenhe a segunda conexãoctx.quadraticCurveTo(y - espessura, (x - innerRadius) - espessura / 2, x, y - innerRadius - espessura)
Na verdade, esta etapa não é muito diferente da terceira etapa. Simplesmente alteramos as posições dos parâmetros.
6. Preenchimentoctx.fill();
Neste ponto, um anel não fechado simples é concluído
Desenhe um segundo anel de barra de progresso
7. Inicializaçãoctx.beginPath();ctx.fillStyle = #e87c7c;
BeginPath significa desenhar um novo gráfico. Se este método não for chamado, o gráfico desenhado posteriormente será conectado ao gráfico desenhado anteriormente.
8. Desenhe o segundo anel da barra de progressoctx.beginPath();ctx.fillStyle = #e87c7c;ctx.arc(x, y, raio, Math.PI * 1,5, Math.PI * 2)ctx.quadraticCurveTo((x + innerRadius) + espessura / 2, y + espessura, x + innerRadius, y)ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1,5, verdadeiro)ctx.quadraticCurveTo(y - espessura, (x - innerRadius) - espessura / 2, x, y - innerRadius - espessura)ctx.fill();
Como o método de desenho é exatamente igual ao do primeiro círculo, não há necessidade de repeti-lo. A diferença é apenas o arco do círculo.
9. Girar telatransformar: girar (-135 graus);
Como a rotação CSS é mais conveniente e salva o cálculo do ângulo, eu uso a transformação CSS para girar. Claro, o Canvas também fornece métodos de rotação
Código completo
<!DOCTYPE html><html lang=cn><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=ie=edge> <title>canvas</title> <style> .ring {largura: 150px altura: 150px exibição: flex; alinhar itens: centro; justificar conteúdo: centro; posição da coluna: relativo; absoluto; tamanho da fonte: 30px; peso da fonte: negrito cor: vermelho } .small {tamanho da fonte: 12px; peso da fonte: mais leve; } .title { cor: vermelho inferior: 0; posição: absoluto } </style></head><body> <div class=ring> <canvas id=tutorial width=150 height= 150></canvas> <span class=fraction>100 <span class=small>Pontos</span> </span> <span class=title>Pontos de serviço</span> </div> <script> let radius = 75 deixe espessura = 10 deixe innerRadius = raio - espessura deixe x = 75 deixe y = 75 var canvas = document.getElementById('tutorial'); ctx.beginPath(); ctx.arc(x, y, raio, Math.PI * 1,5, Math.PI) ctx.quadraticCurveTo((x - innerRadius) - espessura/2 , y - espessura, x - innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1,5, verdadeiro) ctx.quadraticCurveTo(y - espessura, (x - innerRadius) - espessura / 2, x, y - innerRadius - espessura) ctx.fill(); innerRadius) + espessura / 2, y + espessura, x + innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1,5, true) ctx.quadraticCurveTo(y - espessura, (x - innerRadius) - espessura / 2, x, y - innerRadius - espessura) ctx.fill(); </script></body></html>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.