我正在渲染一个单元格网格,非常类似于填字游戏中的网格,但使用四种不同的颜色来填充每个单元格(不仅限于黑色或白色)。
该网格大小约为160x120,我需要尽可能快地进行渲染,因为它将用于显示细胞自动机动画。
我尝试了两种不同的方法来渲染网格:
Render each cell using something like:
var w = x + step; var h = y + step; canvasContext.fillStyle=cell.color; canvasContext.fillRect(x+1,y+1,w-1,h-1); canvasContext.strokeRect(x,y,w,h);
Render the all of cells without the border, and then render the grid lines using:
var XSteps = Math.floor(width/step); canvasContext.fillStyle = gridColor; for (var i = 0, len=XSteps; i<len; i++) { canvasContext.fillRect(i*step, 0, 1, height); } //Similar thing for Y coord
注意:网格会移动,因为用户可以移动它或缩放视图。
总的问题是:在一个元素上绘制一个单元格网格的最快算法是什么?