이 기사는 HTML5 캔버스가 멋진 눈부신 빅 웨이브 일정을 재생하는 효과를 다음과 같이 소개합니다.
위 그림과 같이,이 기사는 위의 효과를 달성하는 것입니다.
Alloytouch는 최근 시원하고 시원한 하중 효과를 썼기 때문입니다. 따라서 선호하는 Big Wave Progress Map.
우선, 우리는 Big Wave Picture Progress 구성 요소를 포장해야합니다. 기본 원칙은 캔버스를 사용하여 벡터 다이어그램과 그림 재료를 그려 파동 특수 효과를 합성하는 것입니다.
2 차 큐 베트를 이해하십시오2 차 Curveto () 메소드는 제 2 베셀 곡선의 지정된 제어점을 사용하여 전류 경로에 점을 추가하는 데 사용됩니다.
자바 스크립트 구문 :
Context.quadraticcurveto (CPX, CPY, X, Y);매개 변수
X CPX 베셀 제어 지점의 좌표
CPY BESSEL CONTROL POINT Y 좌표
x는 x의 끝점에서 좌표를합니다
Y의 끝점에 Y 후드
좋다:
CTX.MOVETO (20,20);
위의 코드를 통해 두 번째 베셀 곡선을 그릴 수 있습니다.
파도를 그려보십시오 var waveWidth = 300, 오프셋 = 0, waveHeight = 8, WaveCount = 5, startx = -100, Starty = 208, Progress = 0, ProgressTep = 1, d2 = wavewidth / wavecount, = d2 / 2, hd = d / 2 , c = getElementBas (mycanvas), ctx = c.getContext () {Offset- = 5; === D2) CTX. C.Width, Ctx.beginpath (); for (var i = 0; i <wavecount; i ++) {var dx = i * d2; Offsetx + HD + D, 오프셋, Offsetx + D2);무한 운동의 파도를 볼 수 있습니다.
여기서 주요 요구가 필요합니다. 드로잉 영역은 200200 년 캔버스를 사용하여 이미지 수정 된 이미지를 숨기는 캔버스보다 큽니다.
코드 클론을 받으면 큰 캔버스에 그려 낼 수 있습니다.
여기서, (-1 오프셋 === d2) 오프셋 = 0;
D2는 피크+밸리 길이입니다. 피크+계곡 후, 동일한 수명주기가 0과 동일한 수명 주기로 시작되기 시작하여 0으로 재설정 할 수 있습니다.
Global CompositeOperation을 이해하십시오GlobalCompositeOperation 특성은 캔버스에 그려진 색상이 캔버스의 기존 색상과 어떻게 결합되는지를 보여줍니다.
사용할 큰 웨이브 진행 다이어그램을 그립니다.
ctx.globalcompositeOperation = 대상 -탑;
대상-아 톱의 중요성 : 캔버스의 기존 컨텐츠는 새로운 그래픽과 겹치는 곳에 만 유지됩니다. 새로운 그림은 내용 후에 그려집니다.
물론 Global CompositePration을위한 많은 옵션이 있습니다.
전반적인 구현 var IMG () {) {... img.onload = function () {tick ();};간단하고 직접적이 되려면 로더를 캡슐화하는 코드가 있으며 SRC는 새 이미지를 통해 직접 설정하여 그림을로드합니다.
벡터 다이어그램을 그린 후 Global CompositeOperation을 설정 한 다음 펭귄 그림을 그립니다.
마침내
예제 다운로드 : 데모
위는이 기사의 모든 내용입니다.