Récemment, j'ai vu deux démo amusants, la carte des effets est la suivante:
Aujourd'hui, j'étais libre le week-end et j'ai utilisé la toile H5 pour l'imiter. Cet article n'atteint que les premiers rendus.
C'est l'effet que j'ai réalisé: Principe de mise en œuvreLe principe de mise en œuvre est l'article du livre, qui ne se répéte plus ici. Maintenant, pas à pas pour réaliser cet effet.
Étape en zéro: dessiner un cercleLe code source est le suivant:
L'effet de course est le suivant:
<! / tête> <body> <canvas id = canvas width = 500 height = 500> </ canvas> <script> var canvas = document.getElementByid ('canvas') var ctx = canvas.getConte xt ('2d') canvas. largeur = 500 canvas.height = 500 var grille = canvas.width / 4 var cx = canvas.width / 2 // colonie de colonie x coordonnées var cy = canvas.height / 2 / / {ctx.beginpath () ctx.arc ( Cx, cy, grid / 2, 0, 2 * math.pi)} cercle () ctx.stroke () </script> </body> </html> </html> </html> </html> < / html> </ html> </html> </html> </html> </html>Cette démo implique l'utilisation la plus simple de la toile.
Étape 1: Dessinez un autocollant bleu Utilisez ctx.fillText pour dessiner un poteau bleu au centre du cercle. Le texte est épais et horizontal.
Le code est le suivant:
Texte de fonction (FillStyle) {var FonTSize = size / 250 * 120 ctx.font = 'Bold' + FonTSize + 'px arial' ctx.textalign = 'ctx.fillStyle = Film Style Ctx.FillText (' Patch ', Cx, Cy + FontSize * 0.3)} Text ('# 29A3FE')L'effet est le suivant:
Étape 2: Dessinez une onde bleueVar wavesize = taille / 6 // taille d'onde var x = 0 // déviation de position d'onde de la position ondulée .; quadraticcurveto (cx + taille / 4 + x + taille / 2, cx + taille / 2 + x + taille / 2, cy) ctx.quadraticcurveto (cx + taille * 3/4 + x + taille / 2, cy + wavesize, Cx + taille + x + taille / 2, cy) ctx.lineto (cx + taille + x. + taille / 2, canvas.head) ctx.lineto (cx -size + x + taille / 2, canvas.height) ctx .Lineto (cx -size + x + taille / 2, cy) ctx.closepath ()} ctx .fillStyle = '# 29a3fe'curve () ctx.fill ()
L'effet est le suivant:
Étape 3: Dessinez un autocollant blanc Curve () ctx.clip () texte ('# f00') La première phrase curve() ctx.clip() ctx.fill() chemin en forme d'onde. (y compris le texte) ne peut être affiché que dans la zone de couture.
Afin de distinguer la couleur de fond, j'ai changé les autocollants en rouge.
L'effet est le suivant:
Étape 4: Dessinez les vagues des sports Fonction Loop () {ctx.ClearRect (0, 0, canvas.width, canvas.head) x - = 1,5 x = x% taille ctx.save () ctx.fillStyle = e 'courbe () ctx.fill () ctx .Ortore () requestanimationframe (LOOP)} LOOP ()L'effet est le suivant:
Étape 5: Intégrez le contenu précédentL'effet est le suivant:
Étape 6: CouperÉtape dans le zéro:
Cercle () ctx.stroke ()
Passer à:
Cercle () ctx.clip ()
De cette façon, la forme de l'extérieur circulaire peut être coupée, puis vous pouvez le faire.
Enfin, joignez le code source complet:
<! 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 // La taille du cercle var cx = canvas.width / 2 // Le point central coordonne Var Cy = Canvas. Heigh / Height / 2 // Circle Center Point Y Coordonnées Var Wavesize = Taille / 6 // Taille d'onde var x = 0 // Wave Position Offset Function Circle () {ctx.beginpath () ctx.arc (cx, cy, taille / 2, 0, 2 * math.pi)} Fonction Curve () {ctx.beginpath () ctx.moveto (cx -size + x + taille / 2, cy) ctx.quadraticcurveto (cx -Size + size / 4 + X + X + Taille / 2, Cy -Wavesize, Cx -Size + Taille / 2 + X + Taille / 2, Cy) CTX.QuadraticCurveto (Cx -Size + Taille * 3/4 + X + Taille / 2, Cy + Wavesize, cx-taille + taille + x + taille / 2, cy) ctx.quadraticcurveto (cx + taille / 4 + x + taille / 2, cy -wavesize, cx + taille / 2 + x + taille / 2, cy) À (à (à (à (à cx + taille * 3/4 + x + taille / 2, cy + wavesize, cx + taille + x + taille / 2, cy) ctx.lineto (cx + taille + x + taille / 2, canvas.height) ctx. Var fontsize = size e / 250 * 120 ctx.font = 'bold' + fontsize + 'px arial' ctx.textalign = 'Center' ctx.fillStyle = fillstyle ctx.fillText ('Post', cx, cy + fontsize * 0.3 Loop de fonction () {ctx.ClearRect (0, 0, 0, Ctx.Save () Ctx.Height) ctx.fillStyle = '# 29a3fe' ctx.fill () ctx.fill () ctx.clip () text ('#fff') ctx.restnimationframe (LOIP (LOOP)} LOOP () </ body> </ html " RésumerCe qui précède est tout le contenu de cet article.