Recientemente vi dos divertidas demostraciones, The Effect Map es el siguiente:
Hoy, estaba libre el fin de semana y usé el lienzo H5 para imitarlo. Este artículo solo logra las primeras representaciones.
Este es el efecto que logré: Principio de implementaciónEl principio de implementación es el artículo del libro, que ya no se repite aquí. Ahora pasemos paso a paso para lograr este efecto.
Paso en cero: dibuja un círculoEl código fuente es el siguiente:
El efecto de ejecución es el siguiente:
<! /head> <body> <Canvas id = Canvas width = 500 Height = 500> </ Canvas> <Script> Var Canvas = document.getElementById ('Canvas') var ctx = Canvas.getConte Xt ('2d') Canvas. ancho = 500 canvas.height = 500 var grid = canvas.width / 4 var cx = canvas.width / 2 // asentamiento círculo x coordina var cy = canvas.height / 2 / / {ctx.beginpath () ctx.arc ( Cx, cy, cuadrícula/2, 0, 2 * math.pi)} circle () ctx.stroke () </script> </body> </html> </html> </html> </html> < /html> </html> </html> </html> </ html> </html>Esta demostración implica el uso más simple de lienzo.
Paso 1: Dibuja una pegatina azul Use ctx.fillText para dibujar un poste azul en el centro del círculo. El texto es grueso y horizontal.
El código es el siguiente:
Texto de función (relleno) {var fontSize = size / 250 * 120 ctx.font = 'Bold' + fontSize + 'px arial' ctx.textalign = 'ctx.fillstyle = relleno estilo ctx.filltext (' parche ', cx, cy + FontSize * 0.3)} Texto ('#29A3FE')El efecto es el siguiente:
Paso 2: dibuja una ola azulVAR WAVESIZE = Size / 6 // Size de onda VAR x = 0 // Desviación de posición de onda de la posición ondulada; QuadraticCurveto (CX + Size / 4 + X + Size / 2, CX + Size / 2 + X + Size / 2, CY) CTX.QuadraticCurveto (CX + tamaño * 3 /4 + x + tamaño / 2, Cy + Wavesize, CX + Size + X + Size / 2, CY) CTX.Lineto (CX + Size + X. + Size / 2, Canvas.head) CTX.Lineto (CX -Size + X + Size / 2, Canvas.Height) CTX .Lineto (cx -size + x + size / 2, cy) ctx.cloSepath ()} ctx .fillstyle = '#29a3fe'curve () ctx.fill ()
El efecto es el siguiente:
Paso 3: Dibuja una pegatina blanca Curve () ctx.clip () text ('#f00') La primera curve() ctx.fill() una ruta en forma de onda ctx.clip() (incluido el texto) solo se puede mostrar en el área de adaptación.
Para distinguir con el color de fondo, cambié las pegatinas a rojo.
El efecto es el siguiente:
Paso 4: Dibuja las olas de los deportes Function loop () {ctx.clearrect (0, 0, canvas.width, canvas.height) x -= 1.5 x = x % size ctx.save () ctx.stroke () ctx.fillstyle = e 'curve () ctx .fill () ctx.ortore () requestAnimationFrame (bucle)} bucle ()El efecto es el siguiente:
Paso 5: integrar el contenido anteriorEl efecto es el siguiente:
Paso 6: cortar rondaPaso en el cero:
Círculo () ctx.stroke ()
Cambio a:
Círculo () ctx.clip ()
De esta manera, la forma del exterior circular se puede cortar, y luego puede hacerlo.
Finalmente, adjunte el código fuente completo:
<! Ccc;} </style> </head> <body> <Canvas id = Canvas width = 500 Height = 500> </ Canvas> <Script> Var Canvas = document.getElementById ('Canvas') var ctx = Canvas.getContext ('2d') Canvas.Width = 500 Canvas.Height = 500 var size = Canvas.Width / 4 // El tamaño del círculo var cx = Canvas.width / 2 // El punto central x coordina var cy = lona. HEAGH / altura / 2 // punto central círculo y coordina var wavesize = size / 6 // size de onda var x = 0 // función de compensación de onda círculo () {ctx.beginpath () ctx.arc (cx, size size / 2, 0, 2 * math.pi)} function curve () {ctx.beginpath () ctx.moveto (cx -size + x + size / 2, cy) ctx.quadraticcurveto (cx -size + size / 4 + + X + x + tamaño / 2, cy -wavesize, cx -size + size / 2 + x + size / 2, cy) ctx.quadraticcurveto (cx -size + tamaño * 3 /4 + x + tamaño / 2, cy + + WaveSize, CX- tamaño + tamaño + x + tamaño / 2, CY) CTX.QuadraticCurveto (CX + tamaño / 4 + x + tamaño / 2, cy -wavesize, CX + tamaño / 2 + x + tamaño / 2, cy) A (a (a (a (a (a (a CX + tamaño * 3/4 + x + tamaño / 2, cy + wavesize, cx + size + x + size / 2, cy) ctx.lineto (cx + tamaño + x + tamaño / 2, Canvas.Height) CTX. Var fontSize = size = size e / 250 * 120 ctx.font = 'Bold' + fontSize + 'px arial' ctx.textalign = 'center' ctx.fillstyle = relleno ctx.fillText ('post', cx, cy + fontSize * 0.3.)} Function loop () {ctx.clearrect (0, 0, Canvas.Width, Canvas.Height) x -= 1.5 x = x % size ctx.save () ctx.clip () text (#29a3fe ') ctx.fillStyle =' #29a3fe 'ctx.fill () ctx.fill () ctx.clip () text (' #fff ') ctx.restnimationFrame (loip (loop)} loop () </boder> html " ResumirLo anterior es todo el contenido de este artículo.