Html5 캔버스 다시 그리기

나는 차트와 그리드가 있으며, 일부는 체크 박스를 클릭하여 숨겨 지거나 표시 될 수 있습니다. 누구든지 메타 코드를 제안 할 수 있었고,이를 수행하는 데 가장 효과적인 접근법을 보여 주었습니까? 'Show Grid'설정이 변경 될 때마다 전체 캔버스를 다시 그리는 것 외에는 더 좋은 것을 볼 수 없습니다.Html5 캔버스 다시 그리기

출처

2012-01-01 Anonymous

두 개의 캔버스 노드를 사용할 수 있습니다. 하나는 차트 용이고 다른 하나는 그리드 용입니다.

그런 다음 격자 요소를 숨기거나 (style.display = "none") 표시 (style.display = "block") 할 수 있습니다.

캔버스 픽셀에는 알파가 포함되어 있으므로 완전히 투명하게 표시 할 수 있습니다. 실제로 캔버스를 만들 때 기본값입니다. 그리드를 통해 차트를 볼 수 있습니다.

출처

2012-01-01 09:29:22 6502

감사합니다. 좀 더 복잡한 시나리오는 무엇입니까? - 내가 '동적 인'영역을 몇 개 가지고 있다면, 각각의 '동적 인'미래를위한 전용 캔버스를 갖고있는 것이 과도하지 않을까요? 성능 저하없이 얼마나 많은 캔버스를 겹쳐 쌓을 수 있습니까? –

브라우저는 수 백개의 캔버스 요소를 관리하는 데 꽤 효과적입니다. 캔버스와 ''노드 사이에 브라우저 그래픽 엔진에는 별다른 차이가 없으며 일반적으로 웹 페이지에 많은 이미지가 표시됩니다. 또한 숨기기/표시는 애니메이션이 아니라 사용자 상호 작용에 대한 반응 일 뿐이므로 휴대 전화 나 태블릿과 같이 덜 강력한 장치에서도 속도가 문제가되지 않아야합니다. – 6502

Html5 캔버스 다시 그리기

답변

관련 문제