例如,在绘制点列表时,是否在运行时对其进行排序以仅更改ctx.fillStyle 5次而不是每个点更改1次,会对性能有所裨益吗?
根据我的经验,是的 - 经常更改.fillStyle会非常昂贵。
我编写了一个在画布中绘制大量矩形的代码,使用只有两种颜色的方块来绘制矩形的时间明显优于使用许多频繁更改颜色的方块来绘制矩形。
总之,由于您只有五种不同的颜色:
- 创建一个屏幕外画布,可以在其中绘制五个圆圈
- 使用.drawImage()将正确的颜色圆圈快速复制到目标画布中,而无需重新计算圆弧坐标
- 在循环内部将points[i]分配给一个局部变量,以避免反复引用它。
在我的笔记本电脑上,此代码在400x400画布上绘制3000个圆形需要7毫秒。
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/
ctx.arc(points[i].x, points[i].y, radius, 0, Math.PI * 2, true)
。尝试绘制简单的矩形,看看是否可以加快速度。(在我看来,应该可以...) - ppeterka.fillStyle
,因此无需创建排序数组。 - Alnitak