Recentemente, vi duas demonstrações divertidas, o mapa de efeitos é o seguinte:
Hoje, eu estava livre no fim de semana e usei a tela H5 para imitá -lo. Este artigo atinge apenas as primeiras renderizações.
Este é o efeito que consegui: Princípio da implementaçãoO princípio da implementação é o artigo do livro, que não é mais repetido aqui. Agora vamos passo a passo para alcançar esse efeito.
Passo em zero: desenhe um círculoO código -fonte é o seguinte:
O efeito de execução é o seguinte:
<! /Head> <Body> <canvas id = largura da tela = 500 altura = 500> </canvas> <cript> var Canvas = document.getElementById ('Canvas') var ctx = canvas.getConte XT ('2D'). largura = 500 canvas.Height = 500 var grid = Canvas.width / 4 var cx = Canvas.width / 2 // Liquidação do círculo x coordenadas var cy = canvas.Height / 2 / / {ctx.beginpath () ctx.arc ( Cx, cy, grid/2, 0, 2 * math.pi)} círculo () ctx.stroke () </sCript> </body> </html> </html> </html> </html> </html> </html> </html> /html> </html> </html> </html> </html> </html>Esta demonstração envolve o uso mais simples da tela.
Etapa 1: desenhe um adesivo azul Use ctx.fillText para desenhar um post azul no centro do círculo. O texto é espesso e horizontal.
O código é o seguinte:
Função Texto (FillStyle) {var fontSize = size / 250 * 120 ctx.font = 'Bold' + fontsize + 'px arial' ctx.textalign = 'ctx.fillstyle = enchimento estilo ctx.filltext (' patch ', cx, cy cy + Fontsize * 0.3)} text ('#29a3fe')O efeito é o seguinte:
Etapa 2: desenhe uma onda azulVar onda = tamanho / 6 // Tamanho da onda var x = 0 // Desvio da posição da onda da posição ondulada. quadraticcurveto (cx + tamanho / 4 + x + tamanho / 2, cx + tamanho / 2 + x + tamanho / 2, cy) ctx.quadraticcurveto (cx + tamanho * 3 /4 + x + size / 2, cy + ondulando, Cx + tamanho + x + tamanho / 2, cy) ctx.lineto (cx + size + x. + size / 2, canvas.head) ctx.lineto (cx -size + x + size / 2, tela.Height) ctx .Lineto (cx -size + x + size / 2, cy) ctx.closePath ()} ctx .fillstyle = '#29a3fe'curve () ctx.fill ()
O efeito é o seguinte:
Etapa 3: desenhe um adesivo branco Curve () ctx.clip () text ('#f00') A primeira curve() ctx.fill() um caminho em forma de onda ctx.clip() (incluindo texto) só pode ser exibido na área de alfaiataria.
Para distinguir com a cor do fundo, mudei os adesivos para vermelho.
O efeito é o seguinte:
Etapa 4: desenhe as ondas dos esportes Function loop () {ctx.clearrect (0, 0, canvas.width, canvas.Height) x -= 1,5 x = x % tamanho ctx.save () ctx.stroke () ctx.fillstyle = e 'curve () ctx .Fill () ctx.ortore () requestanimationframe (loop)} loop ()O efeito é o seguinte:
Etapa 5: integrar o conteúdo anteriorO efeito é o seguinte:
Etapa 6: Cortando a voltaPisar no zero:
Círculo () ctx.stroke ()
Mudar para:
Círculo () ctx.clip ()
Dessa forma, a forma da circular externa pode ser cortada e você pode fazê -lo.
Finalmente, anexe o código -fonte completo:
<! Ccc;} </style> </head> <body> <canvas id = lona width = 500 altura = 500> </canvas> <cript> var canvas = document.getElementById ('canvas') var ctx = canvas.getContext ('2d') canvas.width = 500 canvas.Height = 500 var size = Canvas.width / 4 // O tamanho do círculo var cx = canvas.width / 2 // O ponto central x coordena var cy = tela. heigh / altura / 2 // ponto central do círculo y coordenadas var onda onda = tamanho / 6 // tamanho de onda var x = 0 // onda de deslocamento de posição do círculo de função () {ctx.beginpath () ctx.arc (cx, cy, tamanho, tamanho / 2, 0, 2 * math.pi)} função curve () {ctx.beginpath () ctx.moveto (cx -size + x + size / 2, cy) ctx.quadraticcurveto (cx -size + size / 4 + + X + x + tamanho / 2, cy -owaveSize, cx -size + size / 2 + x + size / 2, cy) ctx.quadraticcurveto (cx -size + tamanho * 3 /4 + x + size / 2, cy + Onda onda, cx- tamanho + tamanho + x + tamanho / 2, cy) ctx.quadraticcurveto (cx + size / 4 + x + size / 2, cy -owavesize, cx + tamanho / 2 + x + tamanho / 2, cy) Para (para (para (para (para (para cx + tamanho * 3/4 + x + tamanho / 2, cy + ondulando, cx + tamanho + x + tamanho / 2, cy) ctx.lineto (size cx + + x + tamanho + tamanho + x + / 2, Canvas.Height) ctx. Var fontsize = tamanho = tamanho e / 250 * 120 ctx.font = 'Bold' + fontsize + 'px arial' ctx.textalign = 'Center' ctx.FillStyle = FillStyle ctx.filltext ('post', cx, cy + fontsize * 0.3. ') ctx.fillstyle =' #29a3fe 'ctx.fill () ctx.fill () ctx.clip () text (' #fff ') ctx.restnimationframe (loip (loop)} loop () </body> </ html " ResumirO acima é o conteúdo deste artigo.