Недавно я увидел две забавные демонстрации, карта эффекта выглядит следующим образом:
Сегодня я был свободен на выходных и использовал холст H5, чтобы подражать ему. Эта статья только достигает первых визуализаций.
Это эффект, который я достиг: Принцип реализацииПринцип реализации - статья в книге, которая здесь больше не повторяется. Теперь давайте шаг за шагом, чтобы достичь этого эффекта.
Шаг в нуле: нарисуйте кругИсходный код заключается в следующем:
Эффект бега выглядит следующим образом:
<! /head> <body> <canvas id = width canvas = 500 hight = 500> </canvas> <script> var canvas = document.getelementbyid ('canvas') var ctx = canvas.getconte xt ('2d') canvas. ширина = 500 canvas.height = 500 var grid = canvas.width / 4 var cx = canvas.width / 2 // circle settlement 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 = style ctx.filltext (' patch ', cx, cy.fillstyle = gild style ctx.filltext (' patch ', cx, cy.fillstyle = fill ctx.filltext (' patch ', cx, cy. + Fontsize * 0.3)} text ('#29a3fe')Эффект заключается в следующем:
Шаг 2: Нарисуйте синюю волнуVar Wavesize = size / 6 // Размер волны var x = 0 // отклонение положения волны волнистого положения. 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, 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') ctx.fill() предложение curve() ctx.clip() волновой путь. (включая текст) может отображаться только в области пошива.
Чтобы различить цвет фона, я изменил наклейки на красный.
Эффект заключается в следующем:
Шаг 4: Нарисуйте волны спорта 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 (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 / 2 // Кружная центральная точка y координаты var Wavesize = size / 6 // Размер волны var x = 0 // Функция смещения положения волны Circle () {ctx.beginpath () ctx.arc (cx, cy, size / 2, 0, 2 * math.pi)} curve function () {ctx.beginpath () ctx.moveto (cx -size + x + size / 2, cy) ctx.quadraticcurveto (cx -size + size / 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 + 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 cx + size * 3/4 + x + size / 2, cy + wavesize, cx + size + x + size / 2, cy) ctx.lineto (cx + size + x + size / 2, canvas.height) ctx. Var fontsize = size = size 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 " СуммироватьПриведенное выше содержимое этой статьи.