2014-02-05 3 views
1

이 애니메이션을하고 싶습니다. 바다에서 수위가 상승하여 구덩이가있는 작은 산을 삼키고 있습니다. 물이 빠져 나갈 때 일부는 주머니에 남아 있고 다시 수위가 상승하면 다시 하나가됩니다. 이 애니메이션은 무한정 계속됩니다. 이제는 두 가지 접근 방법을 사용하여이 작업을 시도했습니다.HTML5가 전체 합성 작업으로 모양을 겹치고 있습니다.

1) 바다에서 물의 흐름으로 수영장에서 물을 채우고 지우십시오. ctx.bezierCurveTo (x1, y1, x2, y2, end_x, end_y); 물의 흐름으로 첫 번째 및 두 번째 제어점을 변경하여 기저부를 거의 평면에서 구형으로 변경하거나 그 반대로 변경했습니다. 그러나 매끄럽지 않고 두 번째 구덩이는 불규칙한 기초를 가지고있어서 불가능합니다.

2) 물이 채워진 필요한 주머니를 만들고 물이 잠길 때 바닷물과 섞이도 록 불투명도로 연주했습니다. 다시 한번이 접근법은 매끄러운 외관을 제공하지 않습니다.

여기가 같아야 작업은 다음과 같습니다

https://s3.postimg.org/7f430a1ir/Picture1.jpg

기본 이미지는 캔버스의 배경이다, 난 그냥 물 흐름을 제어 할 수 있습니다.

할 일을 제안하십시오.

답변

0

당신은 당신의 바다 물이 원활하게 산, 특히 "원 아웃"에서

에 침입 가지고 합성을 사용할 수는 합성은 당신이 기존의 내용을 중복되지 않는 경우에만 새로운 콘텐츠를 그릴 수 있습니다.

따라서 "소스 아웃"합성은 기존 산과 겹치지 않는 곳에 만 새로운 바닷물을 그릴 수있게 해줍니다.

것은 물이 상승하는 경우 :

  1. 명확 캔버스
  2. 설정 globalCompositeOperation이 = "소스를 통해"// 기본, 새 도면
  3. 이 산을 그릴 초과 인출됩니다
  4. 세트 globalCompositeOperation = "source-out"// 새로운 바닷물은 기존 산들을 덮어 쓰지 않을 것임
  5. 떠오르는 해수를 끌어 올린다
  6. increas 전자 해수
  7. 반복 # 1 물이 떨어지는 경우 귀하의 해수가 원하는 높이

가 될 때까지의 높이 :

  1. 명확 캔버스
  2. 설정 globalCompositeOperation = "소스 -over "// 기본, 새 도면
  3. 설정 globalCompositeOperation 당신의 산
  4. 그릴 초과 인출됩니다 ="// 새로운 해수 원 아웃 "이상하지 않습니다 그릴 기존의 산들은
  5. 에만 산의 구덩이에서 유지 해수 을 그릴
  6. 해수의 높이를 감소 떨어지는 바다 물
  7. 을 그릴
  8. 당신의 바닷물이
  9. 반복 # 1 때까지 원하는 높이에서
+0

나는 산의 배경 이미지를 가지고 있으므로 그 바닷물과 핏빛 물, 둘 다 반투명. 코드 흐름 - 1) ctx.globalCompositeOperation = "source-out"; 2) 해수 도면 - 상승 및 감소 3) 구덩이 물. 구성 조건 중 어느 것도 일치하지 않으며, 둘 다 짙은 색을 형성하거나 장면에 투명한 구멍을 제공합니다. – user3275442

+0

아 ... 알았어.도면에 알파 (불투명도)가 감소한 경우 축소 된 알파를 사용하여 합성됩니다. 결과는 당신이 얻는 색상 혼합입니다. 수정 : 감소 된 알파 색상을 100 % 알파와 동일한 색상으로 단순화해야합니다. – markE

+0

설명해 주시겠습니까? – user3275442

0

많은 생각을 한 후 2 단계 접근법을 발견했습니다.

스텝 1 >>

1) 바다 (목적지 물 그리기) 2)가 집합 ctx.globalCompositeOperation = "대상 아웃"; 3) 풀 물 빼기 (출처)

이렇게하면 dest와 겹치는 소스 부분이 제거됩니다. 수영장 대신 빈 공간 (투명성)을 가진 바닷물이 생성됩니다. 이제 구멍이있는 이미지가 dest가됩니다. 이미지는 물의 일관성이 유지되도록 풀 물만 가져와야합니다.

스텝 2 >>

1) 집합 ctx.globalCompositeOperation = "수신처 꼭대기"; 2) 풀 물 빼기 (출처)

이렇게하면 dest가됩니다. 오직 목적지. 소스 오버랩, 즉 dest. 구멍이있는 이미지 (풀 대신 투명도)와 풀 겹치기 중공 지역에서 바닷물이 생성됩니다. 주목할 포인트 - 수영장 물은 바닷물의 하위 집합과 같아서 수영장 물 (근원)이 "대상 - 꼭대기"와 같이 생성 될지 걱정할 필요가 없습니다.

관련 문제