[javascript] HTML5 캔버스 vs. SVG vs. div

이것에 덧붙여서, 나는 다이어그램 응용 프로그램을하고 있었고 처음에는 캔버스로 시작했습니다. 다이어그램은 많은 노드로 구성되며 상당히 커질 수 있습니다. 사용자는 다이어그램에서 요소를 드래그 할 수 있습니다.

내가 찾은 것은 내 Mac에서 매우 큰 이미지의 경우 SVG가 우수하다는 것입니다. MacBook Pro 2013 13 “Retina가 있는데 아래에서 바이올린을 아주 잘 실행합니다. 이미지는 6000×6000 픽셀이고 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);

답변