HTML5 캔버스와SVG와 div

HTML5 캔버스와SVG와 div

요소를 즉시 만들고 이동할 수 있는 가장 좋은 방법은 무엇입니까?예를 들어 직사각형, 원, 폴리곤을 만들고 그 오브젝트를 선택하여 이동합니다.

HTML5는 svg, canvas, div의 3가지 요소를 제공하는 것으로 알고 있습니다.다음 중 어떤 요소가 최고의 성능을 제공합니까?

이러한 접근방식을 비교하기 위해 각각 헤더, 바닥글, 위젯 및 텍스트 콘텐츠가 포함된 시각적으로 동일한 웹 페이지를 3개 만들 생각을 했습니다.첫 번째 페이지의 위젯은 모두 다음과 같이 작성됩니다.canvas 번째 요소는 으로 '로, 두 번째 요소는 모두 '원소'로 되어 있습니다.svg 「」의 세, 「」의 세 번째, 「」의 세 번째.div 및 CSS, ® CSS.

간단한 답변:

SVG는 선택과 이동이 이미 내장되어 있기 때문에 당신에게는 더 편할 것입니다.SVG 오브젝트는 DOM 오브젝트이므로 "클릭" 핸들러 등이 있습니다.

DIV는 괜찮지만 투박하고 많은 수의 퍼포먼스를 로딩할 수 없습니다.

캔버스는 최고의 성능을 제공하지만 관리 상태의 모든 개념(개체 선택 등)을 직접 구현하거나 라이브러리를 사용해야 합니다.

---

긴 답변:

HTML5 캔버스는 단순히 비트맵의 그리기 표면입니다.그림을 그리도록 설정하고(색상과 선 굵기로 말함), 그림을 그리면 캔버스는 아무것도 모릅니다.어디에 있는지, 그리고 방금 그린 것이 무엇인지 알 수 없습니다. 단지 픽셀일 뿐입니다.직사각형을 그려서 이동하거나 선택할 수 있도록 하려면 그 모든 것을 처음부터 코드화해야 합니다.또, 그 코드도 포함해, 그린 것을 기억해 둘 필요가 있습니다.

한편 SVG는 렌더링하는 각 오브젝트에 대한 참조를 유지해야 합니다.작성하는 모든 SVG/VML 요소는 DOM 내의 실제 요소입니다.기본적으로는 작성한 요소를 훨씬 더 잘 추적할 수 있고 마우스 이벤트와 같은 작업을 쉽게 처리할 수 있지만 개체가 많을 경우 속도가 상당히 느려집니다.

SVG DOM의 레퍼런스는, 그린 것에 대처하는 작업의 일부가, 당신을 위해서 행해진다는 것을 의미합니다.SVG는 매우 큰 개체를 렌더링할 때 더 빠르지만 많은 개체를 렌더링할 때는 더 느립니다.

캔버스에서 하는 게 더 빠를 거야SVG에서는 거대한 지도 프로그램이 더 빠를 것이다.Canvas를 사용하려면 이동 가능한 개체를 만들고 실행하는 방법에 대한 튜토리얼이 있습니다.

캔버스는 빠른 작업이나 무거운 비트맵 조작(애니메이션 등)에 적합합니다만, 많은 인터랙티브를 필요로 하는 경우는 더 많은 코드를 필요로 합니다.

HTML DIV 로 만든 그림과 캔버스 로 만든 그림으로 수많은 수치를 조사했습니다.각각의 이점에 대해 많은 글을 올릴 수 있지만, 구체적인 응용 프로그램에 대해 고려할 수 있도록 테스트 결과 중 몇 가지를 알려드리겠습니다.

캔버스와 HTML DIV 테스트 페이지를 만들었는데 둘 다 움직일 수 있는 "노드"를 가지고 있었다.캔버스 노드는 Javascript에서 만들고 추적한 객체입니다.HTML 노드는 이동 가능한 Div였다.

두 번의 테스트에 각각 10만 개의 노드를 추가했습니다.퍼포먼스는 크게 달랐습니다.

HTML 테스트 탭을 로드하는 데 시간이 오래 걸렸습니다(5분 조금 안 걸리고 크롬은 처음에 페이지를 삭제하도록 요청했습니다).Chrome의 태스크 매니저는 탭이 168MB를 차지한다고 말합니다.보고 있을 때는 12~13%, 보고 있지 않을 때는 0%의 CPU 시간이 소요됩니다.

캔버스 탭이 1초 만에 로드되어 30MB를 차지합니다.또, CPU 시간의 13%를 항상 소비합니다.(2013년 편집: 대부분은 수정이 되어 있습니다.

현재 설정은 캔버스 테스트에서 30밀리초마다 모든 것을 다시 그리도록 되어 있기 때문에 HTML 페이지에서 드래그하는 것이 더 원활합니다.이를 위해 Canvas에는 많은 최적화가 필요합니다.(무효화는 가장 쉽고 클리핑 영역, 선택적인 재묘화 등)도입하고 싶은 정도에 따라 달라집니다.)

캔버스가 간단한 테스트의 div처럼 오브젝트 조작을 더 빠르게 할 수 있고 로드 시간이 훨씬 더 빨라질 수 있다는 것은 의심의 여지가 없습니다.캔버스에서 드로잉/로드하는 속도가 빨라지고 최적화를 위한 공간도 훨씬 넓어집니다(즉, 화면 밖에 있는 것을 제외하는 것은 매우 간단합니다.

결론:

• SVG는 아이템이 적은 어플리케이션이나 어플리케이션(1000 미만)에 적합합니다.상황에 따라 다름)
• 캔버스는 수천 개의 오브젝트와 세심한 조작에 적합합니다.그러나 캔버스를 사용하기 위해서는 훨씬 더 많은 코드(또는 라이브러리)가 필요합니다.
• HTML Div는 투박하고 축척이 되지 않으며, 둥근 모서리로만 원을 만들 수 있으며, 복잡한 모양을 만들 수 있지만 수백 개의 작은 픽셀 폭의 Div를 포함합니다.광기가 뒤따른다.

덧붙여서, 저는 도표 어플리케이션을 실시하고 있습니다.처음에는 캔버스부터 시작했습니다.이 다이어그램은 여러 개의 노드로 구성되어 있으며 상당히 커질 수 있습니다.사용자는 다이어그램의 요소를 끌어다 놓을 수 있습니다.

제 Mac에서는 매우 큰 이미지의 SVG가 우수하다는 것을 알게 되었습니다.MacBook Pro 2013 13인치 Retina를 가지고 있는데, 아래의 바이올린을 잘 작동시킵니다.이미지는 6000x6000픽셀이며 1000개의 오브젝트가 있습니다.사용자가 그림에서 물체를 끌고 다닐 때 캔버스에 있는 유사한 구성은 애니메이션을 만들 수 없었습니다.

최신 디스플레이에서는 다양한 해상도를 고려해야 합니다.여기서 SVG는 이 모든 것을 무료로 제공합니다.

바이올린: http://jsfiddle.net/knutsi/PUcr8/16/

풀스크린 : http://jsfiddle.net/knutsi/PUcr8/16/embedded/result/

var wiggle_factor = 0.0;
nodes = [];

// create svg:
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('style', 'border: 1px solid black');
svg.setAttribute('width', '6000');
svg.setAttribute('height', '6000');

svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink",
    "http://www.w3.org/1999/xlink");

document.body.appendChild(svg);


function makeNode(wiggle) {
    var node = document.createElementNS("http://www.w3.org/2000/svg", "g");
    var node_x = (Math.random() * 6000);
    var node_y = (Math.random() * 6000);
    node.setAttribute("transform", "translate(" + node_x + ", " + node_y +")");

    // circle:
    var circ = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circ.setAttribute( "id","cir")
    circ.setAttribute( "cx", 0 + "px")
    circ.setAttribute( "cy", 0 + "px")
    circ.setAttribute( "r","100px");
    circ.setAttribute('fill', 'red');
    circ.setAttribute('pointer-events', 'inherit')

    // text:
    var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    text.textContent = "This is a test! ÅÆØ";

    node.appendChild(circ);
    node.appendChild(text);

    node.x = node_x;
    node.y = node_y;

    if(wiggle)
        nodes.push(node)
    return node;
}

// populate with 1000 nodes:
for(var i = 0; i < 1000; i++) {
    var node = makeNode(true);
    svg.appendChild(node);
}

// make one mapped to mouse:
var bnode = makeNode(false);
svg.appendChild(bnode);

document.body.onmousemove=function(event){
    bnode.setAttribute("transform","translate(" +
        (event.clientX + window.pageXOffset) + ", " +
        (event.clientY + window.pageYOffset) +")");
};

setInterval(function() {
    wiggle_factor += 1/60;
    nodes.forEach(function(node) {

        node.setAttribute("transform", "translate(" 
                          + (Math.sin(wiggle_factor) * 200 + node.x) 
                          + ", " 
                          + (Math.sin(wiggle_factor) * 200 + node.y) 
                          + ")");        
    })
},1000/60);

SVG와 Canvas의 차이를 알면 적절한 것을 선택하는 데 도움이 될 것입니다.

캔버스

• 해상도에 따라 다름
• 이벤트 핸들러 지원 없음
• 텍스트 렌더링 기능 저하
• 결과 이미지는 .png 또는 .jpg로 저장할 수 있습니다.
• 그래픽스 부하가 높은 게임에 최적

SVG

• 해상도에 의존하지 않음
• 이벤트 핸들러 지원
• 렌더링 영역이 큰 응용 프로그램에 가장 적합합니다(Google Maps).
• 복잡한 경우 렌더링 속도가 느림(DOM을 많이 사용하는 경우 렌더링 속도가 느림)
• 게임 어플리케이션에는 적합하지 않습니다.

상기 답변의 대부분은 아직 사실이지만, 갱신할 필요가 있다고 생각합니다.

수년간 SVG의 성능이 크게 향상되었으며, 현재는 JavaScript 성능에 전혀 의존하지 않는 하드웨어 가속 CSS 전환 및 SVG용 애니메이션이 있습니다.물론 JavaScript의 성능도 향상되었고 Canvas의 성능도 향상되었지만 SVG만큼 향상되지는 않았습니다.또한 오늘날 거의 모든 브라우저에서 사용할 수 있는 "새로운 아이"가 블록에 있습니다. 그것은 WebGL입니다.Simon이 위에서 사용한 것과 동일한 단어를 사용하려면:캔버스와 SVG를 쉽게 이길 수 있습니다.단, 이 테크놀로지는 사용하기 어렵고 매우 구체적인 사용 사례에서만 더 빠르기 때문에 꼭 활용해야 하는 것은 아닙니다.

현재 대부분의 사용 사례에 대해 IMHO는 최고의 성능/사용률을 제공합니다.Canvas를 비롯한 WebGL이 빛을 발하기 위해서는 시각화가 매우 복잡해야 합니다(요소의 수에 관한).

이와 유사한 질문에 대한 답변에서는 왜 이 세 가지 기술을 모두 조합하는 것이 최선의 선택이라고 생각하는지 자세히 설명하겠습니다.

Simon Sarris의 결론에 동의합니다.

Protovis(SVG)와 Processingjs(Canvas)의 몇 가지 시각화를 비교했습니다.Protovis(SVG)보다 2000포인트 이상 빠른 처리js(Canvas)입니다.

SVG로 이벤트를 처리하는 것은 물론 오브젝트에 이벤트를 첨부할 수 있기 때문에 훨씬 쉽습니다.캔버스에서는 수동으로 해야 합니다(마우스 위치 확인 등).단순한 조작을 위해서는 어렵지 않습니다.

dojo 툴킷의 dojo.gfx 라이브러리도 있습니다.추상화 레이어를 제공하고 렌더러(SVG, 캔버스, Silverlight)를 지정할 수 있습니다.또한 추가 추상화 계층에 얼마나 많은 오버헤드가 추가되는지 알 수 없지만 상호 작용 및 애니메이션을 쉽게 코드화할 수 있고 렌더러에 의존하지 않습니다.

다음은 몇 가지 흥미로운 벤치마크입니다.

• http://svbreakaway.info/tp.php#jan21a
• http://www.eleqtriq.com/2010/02/canvas-svg-flash/
• http://smus.com/canvas-vs-svg-performance/

divs 옵션에 대한 내 2센트만.

유명/유명/삼사라JS(및 기타)는 절대적인 위치 비내스트 div(비사소한 HTML/CSS 콘텐츠 포함)를 사용하여 위치 결정 및 2D/3D 변환에 matrix2d/matrix3d를 조합하여 사용하고 있으며, 중간 정도의 모바일 하드웨어에서 안정적인 60FPS를 실현하기 때문에 div가 느린 옵션이라고 주장합니다.

Youtube 등에서는 60FPS(특정 효과를 위해 WebGL과 혼합되지만 렌더링의 주요 부분은 아님)에서 모든 것이 검사 가능한 DOM 요소인 고성능 2D/3D를 브라우저에서 실행하는 화면 녹화가 많이 있습니다.

당신의 목적을 위해 SVG를 사용하는 것을 추천합니다.드래그 앤 드롭을 포함한 마우스 핸들링 등의 DOM 이벤트가 포함되어 있기 때문에, 독자적인 리드로우를 실장할 필요도 없고, 오브젝트 상태를 추적할 필요도 없습니다.비트맵 이미지 조작을 해야 할 때는 캔버스를 사용하고 HTML로 작성된 내용을 조작하고 싶을 때는 일반 div를 사용하십시오. 성능에 관해서는 최신 브라우저가 이 세 가지를 모두 가속하고 있지만 지금까지 가장 많은 주목을 받고 있습니다.한편, 자바스크립트를 얼마나 잘 쓰느냐가 캔버스로 최대한의 퍼포먼스를 얻기 위해 중요하기 때문에 SVG를 사용하는 것을 추천합니다.

구글링을 하다 보면 SVG와 Canvas의 사용법과 압축에 대한 좋은 설명을 http://teropa.info/blog/2016/12/12/graphics-in-angular-2.html에서 찾을 수 있습니다.

도움이 되기를 바랍니다.

• SVG는 HTML과 마찬가지로 보존 렌더링을 사용합니다.화면에 직사각형을 그릴 때는 DOM 내의 요소를 사용합니다.그런 다음 브라우저는 직사각형을 그리지만 그 직사각형을 나타내는 메모리 내 SVGrectElement 개체도 만듭니다.이 물체는 우리가 조작할 수 있도록 남아 있는 것입니다.그것은 보존되어 있습니다.시간이 지남에 따라 다른 위치와 크기를 지정할 수 있습니다.이벤트 청취자를 연결하여 인터랙티브하게 만들 수도 있습니다.
• 캔버스는 즉시 렌더링을 사용합니다.직사각형을 그리면 브라우저는 즉시 화면에 직사각형을 렌더링하지만 직사각형을 나타내는 "직각 객체"는 나타나지 않습니다.캔버스 버퍼에 픽셀이 잔뜩 있어요직사각형을 움직일 수가 없어요.다른 직사각형만 그릴 수 있습니다.직사각형의 클릭이나 기타 이벤트에 응답할 수 없습니다.캔버스 전체의 사건에만 대응할 수 있습니다.

캔버스는 SVG보다 더 낮은 수준의 제한 API입니다.하지만 이와는 반대로 캔버스를 사용하면 동일한 양의 리소스로 더 많은 작업을 수행할 수 있습니다.브라우저는 우리가 그린 모든 것에 대해 메모리 내 객체 그래프를 만들고 유지할 필요가 없기 때문에 동일한 시각적 장면을 그리는 데 필요한 메모리 및 계산 리소스가 줄어듭니다.그리고 싶은 매우 크고 복잡한 시각화가 있는 경우 캔버스가 티켓이 될 수 있습니다.

그들은 모두 좋은 점도 있고 나쁜 점도 있기 때문에 아래 비교해보도록 하자.

캔버스는 전체적으로 최상의 성능을 발휘하지만 올바르게 사용하는 경우에만 성능이 향상됩니다.

약점:

1. • 뛰어난 퍼포먼스
2. • DOM을 사용하여 조작할 수 있습니다.
3. • DOM 이벤트에 액세스할 수 있습니다.
4. • CSS 지원
5. • 복잡한 모양을 만드는 것은 어렵다.

퍼포먼스 테스트 : https://kajam.hg0428.repl.co/pref/

캔버스:

1. • 더 나은 형상 지원
2. • 뛰어난 퍼포먼스
3. • 뛰어난 브라우저 지원
4. • CSS 없음

퍼포먼스 테스트 : https://js-game-engine.hg0428.repl.co/canvasTest/preform.html

SVG:

1. • 더 나은 형상 지원
2. • 사용하기 어렵다
3. • 양호한 브라우저 지원
4. • CSS는 없지만 다양한 SVG가 있습니다.
5. • 퍼포먼스가 나쁘다

이번 시험은 아직 성능 테스트를 하지 않았지만, 다른 테스트로 봤을 때 좋지 않습니다.

캔버스를 빠르게 만들려면:

캔버스는 매우 역동적인 성능을 발휘할 수 있으므로 몇 가지 팁을 검토하겠습니다.사용을 피하다ctx.rect그리고.ctx.fill,사용하다ctx.fillRect대신, 이것은 가장 큰 것이다. 그것은 가장 간단한 게임조차도 망칠 수 있다.도형을 사용하는 대신fill그리고.stroke,사용하다fill[Shape]대신.

캔버스를 사용할 때 그것을 기억하지 못한다면, 당신의 게임은 매우 느려질 것입니다.나는 이것을 경험에서 배웠다.

언급URL : https://stackoverflow.com/questions/5882716/html5-canvas-vs-svg-vs-div