질문 : 다음과 같은 경우 캔버스가 svg보다 더 적합합니까?많은 수의 HTML5 SVG 대 Canvas?
케이스 : 나는 이것과 같은 (d3js 라이브러리를 사용) 차트 (하지만 훨씬 더 많은 데이터) 그리기 해요 :
http://mbostock.github.com/d3/talk/20111116/iris-parallel.html
이가 SVG 기반으로하고 그것을 몇 가지에 대해 잘 작동 (svg 경로)을 추가하면 페이지 속도가 급격히 떨어집니다.
주의 사항 : 마우스 이벤트 (svg에 편리함)를 추가해야합니다.
일반적으로 svg은 예와 같이 벡터 이미지에 더 적합합니다. 그러나 canvas은 현대적인 브라우저에서 하드웨어 가속과 같이 많은 이점을 가지고 있습니다. 따라서 선을 그릴 때 확대/축소, 패닝 (panning) 등을 할 수 있습니다. 필요하지 않은 성능은 canvas을 사용합니다.
마우스 이벤트는 모든 것을 수동으로 추적해야하므로 canvas을 사용하는 고통 일 수 있습니다. 따라서 canvas을 사용하는 5000+ 포인트는 재미 있지 않을 수 있습니다. 그러나 래스터 이미지로 모두 그려지고 DOM의 일부가 아니기 때문에 페이지가 선의 수에 관계없이 정상적으로 작동하면 점을 그리면 점을 그려야합니다.
솔직히 찾을 수있는 가장 좋은 방법은 현재 캔버스를 사용하고있는 것을 테스트하는 것입니다.
1. 감사합니다 : D, 2. 마우스 이벤트는 데이터 포인트가 아닌 축과 관련이 있습니다. 따라서 제 경우에는 100 축 이하입니다. 3. Canvas에서 구현 한 내용은 간단하지 않으며 시간이 오래 걸릴 수 있습니다. 그 이유는 처음에 물었습니다. 4. 다시 감사드립니다. D –
제 대답에 게시 한 것처럼 drawImage 메서드를 사용하여 SVG를 캔버스에 그릴 수 있으므로 드로잉 코드를 다시 구현할 필요가 없습니다 . – Philipp
감사합니다.하지만 drawImage는 어떻게 사용합니까? 니가 나에게 발췌문을 줄 수 있니? –
성능이 문제가되면 캔버스로 전환하는 것이 좋습니다. 이 경우 캔버스를 한 번 그릴 수 있습니다. 그 후 꽤 많이 이미지처럼 취급됩니다. 그리기에는 약간의 시간이 걸릴 수 있지만 나중에는 꽤 빠르게 조정할 수 있습니다. context.drawImage 메서드 (example)를 사용하여 렌더링 된 SVG를 캔버스에 그릴 수 있음에 유의하십시오. 따라서 SVG 생성 코드를 유지하여 백그라운드에서 SVG를 만든 다음 캔버스에 그릴 수 있습니다.
하지만 캔버스에있는 즉시 SVG만큼 아름답게 확장되지 않습니다. 사용자가 확대하면 브라우저가 그래픽의 크기를 조절하는 방식에 따라 흐릿하거나 pixely하게됩니다.
캔버스에서 클릭 이벤트는 두 가지 방법으로 처리 할 수 있습니다. 클릭 타겟의 배열을 유지하고 onclick 이벤트 핸들러를 캔버스에 추가하십시오. 클릭이 발생하면 배열을 반복하고 클릭 좌표에 가장 가까운 배열을 확인합니다.
다른 옵션은 hit regions입니다. 이들은 다각형 경로로 정의되어야합니다.
대단히 감사합니다. 매우 도움이되었습니다. 나는 스케일링을 필요로하지 않으므로 흐릿 해지는 것을 두려워하지 않으며 고통스러운 것은 마우스 이벤트 (클릭 및 호버링)입니다. –
캔버스와 svg를 함께 사용할 수 있습니다 (예 : 서로 쌓아 올리는 것). svg 측에서 상호 작용을 처리하도록합니다. 또는 정적 내용을 캔버스에 그리려면 getDataURL을 사용하여 래스터 화 된 결과를 가져온 다음
@AhmedMoawad 나는 동적으로 생성 된 SVG를 캔버스에 그리는 것이 내가 약속 한 것처럼 사소한 것은 아니라는 것을 알았다. 그러나 나는 몇 가지 트릭을 가지고 그것을 할 수 있었다 : http://stackoverflow.com/questions/13963259/drawing-a-modified-svg-to-a-canvas/13999263#13999263 – Philipp
+1 위의 모든 것. SVG보다 캔버스를 사용하고 DOM을 사용하여 이미지를 합성 할 때 놀라운 성능 향상을 보았습니다.
, 당신이 묘사하는 등의 이미지에 가장 적합한 방법을 추상적 멀리 다음과 같은 라이브러리를 사용하는 것입니다 상상
라이브러리를 멀리 캔버스 자체에서 코드를 유지하고하자 Y에 대한 생각을 우.
캔버스 API는 매우 간단하다. 전체 장면 그래프 구현이 필요하지 않은 경우, [맞춤 도우미 기능] (https://github.com/forresto/web-interactive-workshop#processing-not-processing)을 추천하고 싶습니다. 도서관을 통해 자신을 쓰십시오. – forresto
장면이 단순하면 라이브러리를 통해 "기본"API를 사용하는 데 +1 –
선 그리기 방법에 따라 달라집니다. 단일 경로 또는 다각형 요소에 더 많은 선을 결합하여 DOM 요소의 수를 줄이는 것이 가능합니까? 아마도 성능이 약간 향상 될 수 있습니다. –
@ 토마스 W - +1. SVG 기반 시각화 성능을 크게 향상시키는 데 도움이되는 것으로 나타났습니다. 어떤 경우에도 사용자는 수만 줄을 감지 할 수 없습니다. – candu