我正在渲染细胞网格,非常像您在纵横字谜中找到的网格,但使用四种不同的颜色来填充每个单元格(不仅是黑色或白色).
网格大小约为160×120,我需要尽可能快地呈现,因为它将用于显示Cellular automaton动画.
我已经尝试了两种不同的方法来渲染网格：
>使用以下方式渲染每个单元格：
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);
>渲染所有没有边框的单元格,然后渲染网格线：
var XSteps = Math.floor(width/step);
canvasContext.fillStyle = gridColor;
for (var i = 0,len=XSteps; i<len; i++) {
canvasContext.fillRect(i*step,1,height);
}
//Similar thing for Y coord
两种算法执行得不好：在这两种情况下,绘制网格比单元格慢.我错过了什么吗？如何优化这些算法？还有另一种方式我应该尝试吗？
注意：网格移动,因为用户可以移动它或缩放视图.
一般的问题是：在元素上绘制单元格网格最快的算法是什么？
解决方法
做最好的方法是不要这样做.
在一个画布上画一个不变的网格,并在另外一个画布(或下面)上绘制(并清除和重绘)细胞自动机.让浏览器(在所有本机编译优化的荣耀)处理脏和重新绘制和合成.
或者(更好)如果你不会改变你的网格大小,只需创建一个小图像,让CSS填充它作为背景.
CSS背景图片画布：http://jsfiddle.net/LdmFw/3/
基于this excellent demo,这是一个完全通过CSS创建的背景图像网格;这样,您可以根据需要更改大小(以全像素为单位).
CSS3网格到画布的演示：http://jsfiddle.net/LdmFw/5/
如果你必须画一个网格,最快的就是绘制线条：
function drawGrid(ctx,size){
var w = ctx.canvas.width,h = ctx.canvas.height;
ctx.beginPath();
for (var x=0;x<=w;x+=size){
ctx.moveto(x-0.5,0); // 0.5 offset so that 1px lines are crisp
ctx.lineto(x-0.5,h);
}
for (var y=0;y<=h;y+=size){
ctx.moveto(0,y-0.5);
ctx.lineto(w,y-0.5);
}
ctx.stroke(); // Only do this once,not inside the loops
}
网格绘图演示：http://jsfiddle.net/QScAk/4/
对于m行和n列,这需要在单次通过中绘制线条.与绘制m×n个别矩形对比,您可以看到性能差异可能相当大.
例如,8×8个单元格的512×512网格在初始情况下将需要4096个fillRect()调用,但是在使用上述代码的单个stroke()调用中只需要使用128行.