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 Properties캔버스에 그려진 색상이 이미 캔버스에 있는 색상과 어떻게 결합되는지 설명합니다.

큰 파도 진행 차트를 그리려면 다음을 사용합니다.

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을 설정한 다음 펭귄 이미지를 그립니다. 그리기 순서는 틀릴 수 없습니다.

마지막으로

예제 다운로드: 데모

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

페이징 쿼리 사용에 대한 자세한 설명

문자와 수학 함수의 관계

위 내용은 Canvas는 웨이브 진행 차트를 구현합니다(데모 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!