HTML5 Canvas vs.SVG vs. div

简短的回答：

SVG对您来说会更容易，因为选择和移动它已经内置了。SVG对象是DOM对象，因此它们具有“单击”处理程序等。

DIV还可以，但很笨拙，并且在大量时具有可怕的性能负载。

Canvas 具有最佳性能，但您必须自己实现托管状态（对象选择等）的所有概念，或者使用库。

长答案：

HTML5 Canvas只是一个位图的绘图表面。你设置了绘制（比如用颜色和线条粗细），绘制那个东西，然后Canvas对那个东西一无所知：它不知道它在哪里，或者你刚刚画的是什么，它只是像素。如果你想绘制矩形并让它们四处移动或可选，那么你必须从头开始编写所有这些代码，包括记住你绘制它们的代码。

另一方面，SVG 必须维护对其呈现的每个对象的引用。您创建的每个 SVG/VML 元素都是 DOM 中的真实元素。默认情况下，这使您可以更好地跟踪您创建的元素，并且默认情况下可以更轻松地处理鼠标事件之类的事情，但是当有大量对象时，它会显着减慢速度。

这些SVG DOM引用意味着处理您绘制的东西的一些步法已经为您完成了。SVG 在渲染非常大的对象时速度更快，但在渲染许多对象时速度较慢。

在 Canvas 中，游戏可能会更快。一个巨大的地图程序在SVG中可能会更快。如果你确实想使用 Canvas，我有一些关于启动和运行可移动对象的教程。

Canvas 更适合更快的事物和繁重的位图操作（如动画），但如果想要大量的交互性，则需要更多的代码。

我已经在HTML DIV制作的绘图与Canvas制作的绘图上运行了一堆数字。我可以写一篇关于每种方法的好处的庞大文章，但我会给出一些测试的相关结果，供您针对您的特定应用进行考虑：

我制作了Canvas和HTML DIV测试页面，两者都有可移动的“节点”。Canvas节点是我在Javascript中创建并跟踪的对象。HTML节点是可移动的Div。

我在两个测试中添加了 100，000 个节点。他们的表现完全不同：

HTML测试选项卡需要很长时间才能加载（时间略低于5分钟，chrome要求第一次杀死页面）。Chrome的任务管理器表示，该选项卡占用了168MB。当我看着它时，它占用了12-13%的CPU时间，当我不看它时，它占用了0%的CPU时间。

“画布”选项卡在一秒钟内加载，占用 30MB。它还一直占用13%的CPU时间，无论人们是否在看它。（2013年编辑：他们大多修复了这个问题）

在 HTML 页面上拖动更流畅，这是设计所期望的，因为当前的设置是在 Canvas 测试中每 30 毫秒重绘一次所有内容。为此，Canvas有很多优化。（画布失效是最简单的，也是剪辑区域，选择性重绘等，只是取决于你想实现多少）

毫无疑问，你可以让 Canvas 在对象操作上更快，就像这个简单测试中的 div 一样，当然在加载时间上也快得多。在Canvas中绘制/加载速度更快，并且具有更大的优化空间（即，排除屏幕外的内容非常容易）。

结论：

• SVG可能更适合项目很少的应用程序和应用程序（少于1000个？真的取决于）
• Canvas更适合数千个对象和仔细操作，但需要更多的代码（或库）才能使其启动。
• HTML Divs很笨拙，不能缩放，只有圆角才能制作圆形，制作复杂的形状是可能的，但涉及数百个微小的像素范围的小型div。

除此之外，我一直在做一个图表应用程序，最初是从 canvas 开始的。该图由许多节点组成，它们可以变得相当大。用户可以拖动关系图中的元素。

我发现在我的Mac上，对于非常大的图像，SVG是优越的。我有一台MacBook Pro 2013 13“视网膜，它在下面的小提琴上运行得很好。图像为 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);