HTML5 캔버스 색상

Question

HTML5 캔버스에 두 개의 블록이 있습니다.

1. 블루 블록은 마우스로 드래그 할 수 있습니다 캔버스
2. 노란색 블록에 고정하여 예.

누군가가 파란색 블록 위로 노란색 블록을 이동하면 중첩 영역 또는 교차 영역의 색상을 녹색으로 변경하고 싶습니다. 블록의 불투명도 레벨을 변경하여이를 달성 할 수있는 방법이 녹색 = 노란색 + 블루가 때문에

(명확한 아이디어를 가지고 첨부 이미지 참조) 또는 I는 중복을 검색해야 두 블록의 영역을 표시하고 해당 영역에 녹색 블록을 표시하거나 다른 방법이 있습니까?

이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

Answer 1

canvas globalCompositeOperation을 살펴보십시오. 라이터가 복합 유형은 당신이 쫓고있는 것 같습니다.

Answer 2

당신은 3 개 요소를 사용할 수 있습니다

• 노란색 바닥 : 불투명도 1
• 노란색 상단 : 불투명도 0.x, 하단 하나
• 블루와 동일한 크기 : 노란색 div의
사이의 전체 불투명도

Example on jsFiddle

이 훨씬에서 수행하지만, 어쩌면 단계 바른 길.

EDIT : 너무 늦게 캔버스에 요청했으나 프린지 프가 동일해야합니다.