Kürzlich habe ich zwei lustige Demo gesehen, die Effektkarte lautet wie folgt:
Heute war ich am Wochenende frei und benutzte H5 -Leinwand, um es nachzuahmen. Dieser Artikel erreicht nur die ersten Renderings.
Dies ist der Effekt, den ich erreicht habe: ImplementierungsprinzipDas Prinzip der Implementierung ist der Artikel im Buch, der hier nicht mehr wiederholt wird. Lassen Sie uns nun Schritt für Schritt haben, um diesen Effekt zu erreichen.
Schritt in Null: Zeichnen Sie einen KreisDer Quellcode lautet wie folgt:
Der Laufeffekt ist wie folgt:
<! /head> <body> <canvas id = canvas width = 500 height = 500> </canvas> <skript> var canvas = document.getElementById ('canvas') var ctx = canvas.getConte XT ('2D') Canvas. width = 500 canvas.height = 500 var grid = canvas.width / 4 var cx = canvas.width / 2 // Circle Siedlung x Koordinaten var cy = canvas.height / 2 / {ctx.beginPath () ctx.arc (( Cx, cy, grid/2, 0, 2 * math.pi)} circle () ctx.stroke () </script> </body> </html> </html> </html> </html> </html> < /html> </html> </html> </html> </html> </html>Diese Demo beinhaltet die einfachste Verwendung von Leinwand.
Schritt 1: Zeichnen Sie einen blauen Aufkleber Verwenden Sie ctx.fillText , um einen blauen Pfosten in der Mitte des Kreises zu zeichnen. Der Text ist dick und horizontal.
Der Code ist wie folgt:
Funktionstext (fillstyle) {var fontsize = size / 250 * 120 ctx.font = 'BOLD' + FONTSIZE + 'PX ARIAL' CTX.TEXTALIGN = 'CTX.FILLSTYLE = FILL -STIL CTX.FILLTEXT (' Patch ', CX, Cy + Fontsize * 0.3)} text ('#29a3fe')Der Effekt ist wie folgt:
Schritt 2: Zeichnen Sie eine blaue WelleVar wavesize = Größe / 6 // Wellengröße var x = 0 // Wellenpositionabweichung der welligen Position; Quadraticcurveto (Cx + Größe / 4 + x + Größe / 2, Cx + Größe / 2 + x + Größe / 2, cy) ctx.quadraticcurveto (CX + Größe * 3 /4 + x + Größe / 2, CY + Wavesize, CX + Größe + x + Größe / 2, cy) ctx.lineto (cx + size + x. + size / 2, canvas.head) ctx.lineto (cx -size + x + size / 2, canvas.height) ctx ctx .Lineto (cx -size + x + size / 2, cy) ctx.closepath ()} ctx .fillstyle = '#29a3fe'curve () ctx.fill ()
Der Effekt ist wie folgt:
Schritt 3: Zeichnen Sie einen weißen Aufkleber Curve () ctx.clip () text ('#f00') Der erste Satz curve() ctx.clip() ctx.fill() Wellenpfad. (einschließlich Text) kann nur im Schneiderbereich angezeigt werden.
Um mit der Hintergrundfarbe zu unterscheiden, habe ich die Aufkleber in Rot geändert.
Der Effekt ist wie folgt:
Schritt 4: Zeichnen Sie die Wellen des Sports Funktionsloop () {ctx.clearRect (0, 0, canvas.width, canvas.head) x -= 1,5 x = x % Größe ctx.save () ctx.fillstyle = e 'curve () ctx.fill () ctx .ortore () RequestAnimationFrame (Loop)} Loop ()Der Effekt ist wie folgt:
Schritt 5: Integrieren Sie den vorherigen InhaltDer Effekt ist wie folgt:
Schritt 6: SchneidenSchritt in die Null:
Circle () ctx.stroke ()
Wechsel zu:
Circle () ctx.clip ()
Auf diese Weise kann die Form der kreisförmigen Außenseite abgeschnitten werden, und dann können Sie es tun.
Schließlich fügen Sie den vollständigen Quellcode an:
<! 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 // Die Größe des Kreises var cx = canvas.width / 2 Der Mittlerpunkt X ist koordiniert var cy = canvas. Heigh / Heigh / 2 // Circle Center Punkt y Koordinaten var waveSize = Größe / 6 // Wellengröße var x = 0 // Wellenpositions -Offset -Funktionskreis () {ctx.beginPath () ctx.arc (cx, cy, Größe, Größe / 2, 0, 2 * math.pi)} Funktion curve () {ctx.beginPath () ctx.moveto (cx -size + x + size / 2, cy) ctx.quadraticcurveto (Cx -Size + Größe / 4 + X + x + Größe / 2, cy -wavesize, cx -size + Größe / 2 + x + Größe / 2, cy) ctx.quadraticcurveto (Cx -Size + Größe * 3 /4 + x + Größe / 2, CY + WaveSize, Cx- Größe + Größe + x + Größe / 2, cy) ctx.quadraticcurveto (Cx + Größe / 4 + x + Größe / 2, Cy -Wellenwirtschaft, Cx + Größe / 2 + x + Größe / 2, cy) Zu (zu (zu (zu (zu CX + Größe * 3 /4 + x + Größe / 2, Cy + Wavesize, CX + Größe + x + Größe / 2, Cy) ctx.lineto (cx + Größe + x + Größe / 2, Canvas.Height) ctx. Var fontsize = Größe E / 250 * 120 ctx.font = 'BOLD' + fontsize + 'px arial' ctx.textalign = 'center' ctx.Fillstyle = fillstyle ctx.filltext ('post', cx, cy + fontsize * 0.3 .)} Funktionsschleife () {ctx.clearRect (0, 0, canvas.width, canvas.height) x -= 1,5 x = x % Größe ctx.save () ctx.clip () text ('#29a3fe') ctx.fillstyle = ' #29a3fe' ctx.fill () ctx.fill () ctx.clip () text ('#fff') ctx.restnimationFrame (loip (Loop)} Loop () </body> </html " ZusammenfassenDer oben genannte Inhalt dieses Artikels.