html5 Canvas制作马赛克块数问题和加载速度问题

Question

这两天在看canvas 今天照着课本敲了下马赛克的代码。
以下是主要代码

        var imageData = context.createImageData(500,500);
        var pixels = imageData.data;
        //马赛克的块的个数
        **//个数如果为2的平方数显示会比较好，但是32为什么不好？加载也比较慢**
        var numTileRows = 32;
        var numTileCols = 32;
        //每个块的尺寸
        var tileWidth = imageData.width/numTileCols;
        var tileHeight = imageData.height/numTileRows;
        //循环遍历每一块
        for(var r = 0; r < numTileRows; r++){
           for(var c = 0; c < numTileCols; c++){
              debugger;
              //为每个块设置随机的像素颜色值
              var red = Math.floor(Math.random()*255);
              var green = Math.floor(Math.random()*255);
              var blue = Math.floor(Math.random()*255);
              //循环遍历每一个像素点
              for(var tr = 0; tr < tileHeight; tr++){
                for(var tc = 0; tc < tileWidth; tc++){
                   //获得像素点在画布中的实际坐标
                   var trueX = c * tileWidth + tc;
                   var trueY = r * tileHeight + tr;
                   //获得所访问像素的第一个颜色(红色)的索引值
                   var pos = trueY * ( imageData.width * 4 ) + trueX * 4;
                   //为每个颜色设置颜色值
                   pixels[pos] = red;
                   pixels[pos+1] = green;
                   pixels[pos+2] = blue;
                   pixels[pos+3] = 255;
                }
              }
           }
        }

刚开始 块数那里是4*4的，显示正常，
改为14之后就显示下面这样:
接着改为16*16显示没问题：
再改为32*32显示为：
还有就是加载速度的问题，是什么原因使得加载变慢了。
求大神指点，新人没币可以悬赏。。。

Answer 1

 var tileWidth = imageData.width/numTileCols;//关键看能不能整除，32不能整除，是小数，最后的pixels数组就不是连续的了。
        var tileHeight = imageData.height/numTileRows;
                16可以，是因为你后面乘以4，小数0.25*4以后刚好是整数的原因。