html5 从零创建像素(马赛克)

function draw(id){
        var canvas = document.getElementById(id);
        if(canvas == null){
            return false;
        }
        var context = canvas.getContext("2d");

        var imageData = context.createImageData(500,500);
        var pixels = imageData.data;

        // 马赛克的个数
        var numTileRows = 4;
        var numTileCols = 4;

        // 每个块的尺寸
        var tileWidth = imageData.width / numTileCols;
        var tileHeight = imageData.height / numTileRows;

        for(var r = 0; r < numTileRows; r++){
            for(var c = 0; c < numTileCols; c++){

                /*var arr = [0,1],round = arr[Math.round(Math.random())]*255;
                var red        = Math.floor(round);// red
                var green     = Math.floor(round);// green
                var blue     = Math.floor(round);// blue*/
                var red        = Math.floor(Math.random()*255);// red
                var green     = Math.floor(Math.random()*255);// green
                var blue     = Math.floor(Math.random()*255);// blue

                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;
                    }
                }
            }
        }
        context.putImageData(imageData, 0, 0);
    }

    draw("myCanvas");