HTML5 Canvas higlight and unhilight

Question

내 응용 프로그램에서 캔버스에 텍스트를 그립니다. 텍스트를 강조 표시하기 위해 둘러싸는 사각형을 계산하고 일부를 채우기 위해 불투명도 인수 context.fillStyle = "rgba (0,0,255,0.3)"; context.fillRect (rect.x, rect.y, rect.w, rect.h);

텍스트의 강조 표시를 모의 할 수 있습니다.

이제 텍스트를 힐백 해제하고 싶습니다. 그래서 제가 생각하기에 흰색으로 요약 할 수있는 보완 rgb 요소를 사용하는 것이지만 그것이 작동하지 않는다고 생각했습니다. 위 코드의 경우 입니다. context.fillStyle = "rgba (255,255,0,0.3)"; context.fillRect (rect.x, rect.y, rect.w, rect.h);

내가 다른 일을하고 있습니까?

Answer 1

나는 것은 수행

var oldRect = context.getImageData(rect.x-1, rect.y-1, rect.w+2, rect.h+2); 
context.fillRect(rect.x, rect.y, rect.w, rect.h); 

복원 할 :

context.putImageData(oldRect, rect.x-1, rect.y-1); 

왜 -1 +2? 즉 앤티 앨리어스가 적용된 픽셀을 사각형으로 간주하는 것이 반 픽셀 오프셋 (기본 픽셀 좌표계는 모서리가 아닌 서브 픽셀링/앤티 앨리어싱을 트리거하는 기본 좌표계에서 그리기)에서 렌더링 될 가능성이 높습니다. 여분의 부분이 포함되어 있는지 확인하십시오 이미지 데이터에 대한 약간의 사각형을 확장합니다.

페이지 (CORS 제한) 이외의 다른 출처에서 캔버스로 이미지를 그릴 때 발생할 수있는 한 가지 문제점이 있습니다. 이렇게하지 않으면 이미지 데이터를 검색 할 수 없게됩니다. 그 외에는 문제가 없어야합니다.

Answer 2

"하이라이트없는"이런 종류의 합성 옵션을 찾지 못했습니다.

내가 제안 중 하나

1. 첫 번째 오버레이 두 번째 캔버스에 하이라이트를 넣어, 또는 강조 표시가 제거 될 때

2. 처음부터 캔버스를 다시 그리거나

3. 캔버스 복사본을 가져 와서 (ctxgetImageData 사용) 강조 표시가 제거 될 때 복원하십시오.

0 이 경우