Question

我需要在canvas / svg中构建一个10000X10000的矩阵。在每个单元格中，我需要创建一个正方形。我尝试用2个循环中的画布来做到这一点：

for(i=0; i<10000; i++){
  for(j=0;j<10000; j++){
    /*some code of drwing*/
    console.log(i,',',j);
  }
}

但是这个循环需要花费很多时间。如何以良好的性能绘制大矩阵？（我需要矩阵中的每个单元格的行为都不同，具体取决于我从数据库中获取的对象矩阵）

由于

Answer 1

您最有可能最好使用画布进行绘图，这就是原因：

虽然SVG可以直接使用，但绘制起来很容易（参见this article, for example），即使您只进行一次实时DOM插入，如下所示。

＆＃13;

function createSvgElement(tag, props) {
  var el = document.createElementNS("http://www.w3.org/2000/svg", tag);
  for (prop in props) {
    el.setAttributeNS(null, prop, props[prop]);
  }
  return el;
}

var svg = document.getElementById('svg');

document.getElementById('input').onclick = function render() {
  var start = new Date();
  var fragment = document.createDocumentFragment();
  for (var x = 0; x < 400; x++) {
    for (var y = 0; y < 400; y++) {
      var circle = createSvgElement('circle', {
        'cx': x,
        'cy': y,
        'r': 0.2,
        'fill': 'red'
      });
      fragment.appendChild(circle);
    }
  }
  svg.appendChild(fragment);
  var time = new Date() - start;
  document.body.appendChild(document.createTextNode(time + 'ms'));
}

＆＃13;

svg {
  display: block;
}

＆＃13;

<input id="input" type="button" value="render svg" />
<svg id="svg" width="400" height="400"></svg>

＆＃13;

SVG的主要问题是，无论你为了减少浏览器的工作量而做了多少，最终，DOM仍然会有数千个元素，浏览器必须弄清楚如何自行渲染

使用画布将意味着更多的工作对你来说，特别是如果你想做一些花哨的风格，但是当你正在减轻大部分渲染逻辑的浏览器（并自己处理它）时，它可能是一个很快。

＆＃13;

var canvas = document.getElementById('canvas');

document.getElementById('input').onclick = function render() {
  var start = new Date();
  var context = canvas.getContext('2d');
  for (var x = 0; x < 400; x++) {
    for (var y = 0; y < 400; y++) {
      context.beginPath();
      context.arc(x, y, 0.2, 0, 2 * Math.PI, false);
      context.fillStyle = 'red';
      context.fill();
      context.closePath();
    }
  }
  var time = new Date() - start;
  document.body.appendChild(document.createTextNode(time + 'ms'));
}

＆＃13;

canvas {
  display: block;
}

＆＃13;

<input id="input" type="button" value="render canvas" />
<canvas id="canvas" width="400" height="400"></canvas>

＆＃13;

附录：我不经常使用画布，所以可能有更好的方法来完成我上面所写的内容，但是，只需说明差异即可。

如何在svg中构建非常大的矩阵

1 个答案: