12

我需要在 HTML5 画布上绘制很多点，这需要很长时间。我的代码如下所示：

var points = getPoints() // Array of {x,y,color}
var ctx = canvas.getContext("2d");

for (var i = 0; i < points.length; i++) {
   ctx.fillStyle = points[i].color
   ctx.beginPath()
   ctx.arc(points[i].x, points[i].y, radius, 0, Math.PI * 2, true)
   ctx.fill() }

我想知道我可以做哪些性能调整来加快速度。我只有5种不同的颜色。例如，我是否会受益于对点列表进行即时排序以ctx.fillStyle仅更改 5 次而不是每个点一次？

4

1 回答 1

17

例如，我是否会受益于对点列表进行即时排序以仅更改 ctx.fillStyle 5 次而不是每个点一次？

以我的经验，是的——.fillStyle经常更换是相当昂贵的。

我有在画布上绘制大量矩形的代码，并且绘制只有两种不经常变化的颜色的矩形的时间明显优于绘制许多经常变化的颜色的时间。

无论如何，因为你只有五种不同的颜色：

  1. 创建一个屏幕外画布，您可以在其中绘制五个圆圈
  2. 用于.drawImage()将正确的色环添加到目标画布中，而无需重新计算弧坐标
  3. 分配points[i]给循环内的局部变量以避免一遍又一遍地取消引用。

在我的笔记本电脑上，这段代码在 7 毫秒内在 400x400 的画布上绘制了 3000 个圆圈：

var colours = ['red', 'green', 'blue', 'yellow', 'magenta'];
var n = colours.length;
var r = 10;
var d = r * 2;

var off = document.createElement('canvas');
off.width = n * d;
off.height = d;
var ctx = off.getContext('2d');  

for (var i = 0; i < n; ++i) {
    ctx.fillStyle = colours[i];
    ctx.beginPath();
    ctx.arc(i * d + r, r, r, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
}

var canvas = document.getElementById('canvas');
var ctx2 = canvas.getContext('2d');
var t0 = Date.now();
for (var i = 0; i < 3000; ++i) {
    var c = Math.floor(n * Math.random());
    var x = Math.floor(canvas.width * Math.random());
    var y = Math.floor(canvas.height * Math.random());
    ctx2.drawImage(off, c * d, d, d, x - r, y - r, d, d);
}
var t1 = Date.now();
alert((t1 - t0) + "ms");

​见http://jsfiddle.net/alnitak/Dpgts/

于 2012-12-17T14:45:35.383 回答