最近、2つの楽しいデモを見ました。効果マップは次のとおりです。
今日、私は週末に自由になり、H5キャンバスを使用して模倣しました。この記事では、最初のレンダリングのみを達成します。
これが私が達成した効果です：実装の原則実装の原則は本の記事であり、ここでは繰り返されなくなりました。次に、この効果を達成するために一歩一歩見しましょう。
ゼロのステップ：円を描きますソースコードは次のとおりです。
実行効果は次のとおりです。
<！doctype html> <html> <gead> <meta charset = utf-8> <title> baidu tieba client loading loading loadin /head> <body> <canvas id = canvas width = 500 height = 500> </canvas> <script> 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 settrement x座標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>このデモには、キャンバスの最も単純な使用が含まれます。
ステップ1：青いステッカーを描きますctx.fillText使用して、円の中央に青いポストを描画します。テキストは厚くて水平です。
コードは次のとおりです。
関数テキスト（fillstyle）{var fontsize = size / 250 * 120 ctx.font = 'bold' + fontsize + 'px arial' ctx.textalign = 'ctx.fillstyle = fill style ctx.filltext（' patch '、cx、cy + fontsize * 0.3）} text（ '＃29a3fe'）効果は次のとおりです。
ステップ2：青い波を描きますvar wavesize = size / 6 //波のサイズvar x = 0 //波状位置、cx -size + size + x + size / 2、cy）ctx QuadraticCurveto（cx + size / 4 + x + size / 2、cx + size / 2 + x + size / 2、cy）ctx.quadraticcurveto（cx + size * 3/4 + x + size / 2、cy + wavesize、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（）
効果は次のとおりです。
ステップ3：白いステッカーを描きますcurve（）ctx.clip（）text（ '＃f00'）
最初の文章curve() 3番目のステップとは異なり、ctx.clip ctx.clip() ctx.fill()パスを使用して使用されます（テキストを含む）は、仕立て領域にのみ表示できます。
背景色と区別するために、ステッカーを赤に変更しました。
効果は次のとおりです。
ステップ4：スポーツの波を描きますfunction loop（）{ctx.clearrect（0、0、canvas.width、canvas.height）x - = x％size ctx.save（）ctx.stroke（）ctx.fillstyle = e 'curve（）ctx .fill（）ctx.ortore（）requestAnimationFrame（loop）} loop（）効果は次のとおりです。
ステップ5：以前のコンテンツを統合します効果は次のとおりです。
ステップ6：カットラウンドゼロのステップ：
circle（）ctx.stroke（）
変更：
circle（）ctx.clip（）
このようにして、外側の円形の形状を切断し、それを行うことができます。
最後に、完全なソースコードを添付します。
< 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 //サークルのサイズvar cx = canvas.width / 2 //中心点xはvar cy = canvasを調整します。 heigh / height // circle center point y coordinates var wavesize = size / 6 // wave size var x = 0 // wave position offset function circle（）{ctx.beginpath（）ctx.arc（cx、cy、size / 2、0、2 * math.pi）} function curve（）{ctx.beginpath（）ctx.moveto（cx -size + x + size / 2、cy）ctx.quadraticcurveto（cx -size + size / 4 + + 4 + x + x + size / 2、cy -wavesize、cx -size + size / 2 + x + size / 2、cy）ctx.quadraticcurveto（cx -size + size * 3/4 + x + size / 2、cy + Wavesize、cx-サイズ + x + x + size / 2、cy）ctx.quadraticcurveto（cx + size / 4 + x + size / 2、cy -wavesize、cx + size / 2 + x + size / 2、cy） （to（to（to）（to（to（to）3/4 + x + size / 2、cy + wavesize、cx + size + x + size / 2、cy）ctx.lineto（cx + size + x + size） / 2、canvas.height）ctx（cx -size + x + size / 2、canvas.height） var fontsize = size = size e / 250 * 120 ctx.font = 'bold' + fontsize + 'px arial' ctx.textalign = 'center' ctx.fillstyle = fillstyle ctx.filltext（ 'post'、cx、cx、cy + fontsizezize * 0.3 '）ctx.fillstyle ='＃29a3fe 'ctx.fill（）ctx.fill（）ctx.clip（）text（' #fff '）ctx.restnimationframe（loop）} loop（）</body> </ html "要約します上記は、この記事のコンテンツがすべての学習や仕事をするのに役立つことを願っています。