HTML5 Canvas Play Turning Cool Hyun Big Wave Progressive Effect Map эффект (аффилированная демонстрация)

Эта статья представляет эффект холста HTML5, чтобы сыграть крутое ослепительное расписание больших волн следующим образом:

Как показано на рисунке выше, эта статья предназначена для достижения вышеуказанного эффекта.

Потому что Alloytouch недавно написал прохладный и прохладный эффект загрузки. Таким образом, предпочтительная диаграмма прогресса в больших волнах.

Прежде всего, мы должны упаковать компонент прогресса с изображением большой волны. Основной принцип состоит в том, чтобы использовать холст для рисования векторных диаграмм и материалов для картины для синтеза специального эффекта волны.

Метод QuadraticCurveto () используется для добавления точки к текущему пути, используя указанную точку управления второй кривой Бесселя.

Синтаксис JavaScript:

 context.quadraticcurveto (CPX, CPY, X, Y);

X Координата контрольной точки CPX Bessel

CPY Bessel Control Point Y координата

X координирует в конечной точке x

Y -капюшоны в конечной точке y

нравиться:

 ctx.moveto (20,20);

Через приведенный выше код вы можете нарисовать вторую кривую Бесселя.

 Var WaveWidth = 300, Offset = 0, WaveHeight = 8, waveCount = 5, startx = -100, starty = 208, progress = 0, progressTep = 1, d2 = волна WaveCount, = d2 / 2, hd = d / 2 , c = document.getElementById (MyCanvas), CTX = C.GetContext (2D); === D2) offset = 0; for (var i = 0; i <wavecount; i ++) {var dx = i * d2; Offsetx + hd + d, offset -waveheight, offsetx + d2, offsety);

Вы можете увидеть волны бесконечных упражнений:

Основные потребности здесь.

Если вы получите клон кода, вы можете попытаться натянуть его на большой холст.

Здесь, если (-1 смещение === d2) offset = 0;

D2 - пик+длина долины. После пика+долины тот же жизненный цикл начал начинаться с того же жизненного цикла, что и 0, поэтому его можно сбросить до 0.

Свойства GlobalCompositeOperation иллюстрируют, как цвет, нарисованный на холсте, сочетается с существующим цветом на холсте.

Нарисуйте большую диаграмму прогресса в волне, которая будет использована:

 ctx.globalcompositeOperation = destination -top;

Значение назначения-атопа: существующий контент на холсте будет сохранен только там, где он перекрывается с новой графикой. Новая фигура нарисована после контента.

Конечно, есть много вариантов для GlobalCompositepration.

 var img = новое изображение (); img.onload = function () {tick ();};

Чтобы быть простым и прямым, вот код, который инкапсулирует загрузчик, и SRC устанавливается непосредственно через новое изображение для загрузки изображения.

Нарисовав векторную диаграмму, установите GlobalCompositeOperation, а затем нарисуйте изображение пингвина.

наконец

Пример скачать: демо

Приведенное выше содержимое этой статьи.