HTML5 Canvas를 사용한 멋진 큰 파도 진행 차트 효과의 예(데모 포함)

이 글에서는 HTML5 Canvas의 시원한 빅 웨이브 진행 차트 효과를 소개하고 있으며, 자세한 내용은 다음과 같습니다.



위 사진에서 볼 수 있듯이 이 글은 위의 효과를 얻으려면.

최근 AlloyTouch에서 풀다운 새로고침으로 멋진 로딩 효과를 작성해야 하기 때문입니다. 따라서 큰 파도 진행 차트가 선호됩니다.

우선 빅 웨이브 그림 진행 구성 요소를 캡슐화해야 합니다. 기본 원리는 Canvas를 사용하여 벡터 그래픽과 그림 자료를 그려 파도 효과를 합성하는 것입니다.

quadraticCurveTo 이해

quadraticCurveTo() 메서드는 2차 베지어 곡선을 나타내는 지정된 제어점을 사용하여 현재 경로에 점을 추가합니다.

JavaScript 구문:

context.quadraticCurveTo(cpx,cpy,x,y);

매개변수 값

베지어 제어점 좌표의 cpx x

cpy 베지어 제어점의 y 좌표

x 끝점의 x 좌표

y 끝점의 y 좌표

예를 들어 :

ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

위 코드를 통해 2차 베지어 곡선을 그릴 수 있으며 구체적인 원리 효과는 아래 그림에서 확인할 수 있습니다.


파도를 그려보세요

var waveWidth = 300,
    offset = 0,
    waveHeight = 8,
    waveCount = 5,
    startX = -100,
    startY = 208,
    progress = 0,
    progressStep = 1,
    d2 = waveWidth / waveCount,
    d = d2 / 2,
    hd = d / 2,
    c = document.getElementById("myCanvas"),
    ctx = c.getContext("2d");

function tick() {
    offset -= 5;
    progress += progressStep;
    if (progress > 220 || progress < 0) progressStep *= -1;

    if (-1 * offset === d2) offset = 0;
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.beginPath();
    var offsetY = startY - progress;
    ctx.moveTo(startX - offset, offsetY);

    for (var i = 0; i < waveCount; i++) {
        var dx = i * d2;
        var offsetX = dx + startX - offset;
        ctx.quadraticCurveTo(offsetX + hd, offsetY + waveHeight, offsetX + d, offsetY);
        ctx.quadraticCurveTo(offsetX + hd + d, offsetY - waveHeight, offsetX + d2, offsetY);
    }
    ctx.lineTo(startX + waveWidth, 300);
    ctx.lineTo(startX, 300);
    ctx.fill();

    requestAnimationFrame(tick);
}

tick();

무한하게 움직이는 파도를 볼 수 있습니다:



여기서 필요한 것은 스윙 보정 이미지를 숨기기 위해 그리기 영역이 캔버스보다 크다는 것입니다. 위에서는 200200의 캔버스를 사용합니다.

코드를 복제해서 큰 캔버스에 그려보시면 이해가 되실 겁니다.

여기서는 if (-1 오프셋 === d2) 오프셋 = 0;을 통해 무한 루프를 구현합니다.

d2는 파고점 + 파고점의 길이입니다. 파봉 + 파동 최저점 이후에는 동일한 수명주기가 다시 시작되며 이는 0에서 시작하는 것과 같으므로 0으로 재설정할 수 있습니다.


globalCompositeOperation에 대해 알아보기
globalCompositeOperation 속성은 캔버스에 그려진 색상이 이미 캔버스에 있는 색상과 결합되는 방식을 설명합니다.

빅 웨이브 진행 차트 그리기는 다음을 사용합니다:

ctx.globalCompositeOperation = "destination-atop";

destination-atop 의미: 이미 캔버스에 있는 콘텐츠는 그 사이에만 있습니다. 그리고 새로운 그래픽 오버랩이 유지되는 곳. 새로운 도형은 내용 뒤에 그려집니다.

물론 globalCompositeOperation에는 여기에 나열되지 않은 많은 옵션이 있습니다. 멋진 오버레이 효과를 조정하기 위해 다른 속성을 설정해 볼 수도 있습니다.


전체 구현

var img = new Image();
function tick() {
    ...
    ...
    ctx.fill();
    ctx.globalCompositeOperation = "destination-atop";
    ctx.drawImage(img, 0, 0);
    requestAnimationFrame(tick);
}

img.onload = function () {
    tick();
};

img.src = "asset/alloy.png";

코드를 간단하고 직접적으로 만들기 위해 여기에 로더 코드가 있습니다. 새 이미지를 사용하여 이미지를 로드하도록 src를 설정하세요.

벡터 이미지를 그린 후 globalCompositeOperation을 설정한 다음 펭귄 이미지를 그립니다. 그리기 순서는 틀릴 수 없습니다.

드디어

예제 다운로드: 데모



위는 HTML5 Canvas 쿨 빅 웨이브 진행 차트 효과 예시(데모 포함)의 내용이며, 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!