HTML5 Canvas 学习日志（十一）

2019独角兽企业重金招聘Python工程师标准>>>

HTML5 Canvas 学习日志（十一）
创建马赛克图片

$(document).ready(function(){var canvas = $("#mycanvas");var context = canvas.get(0).getContext("2d");var imageData = context.createImageData(500, 500);              var pixels = imageData.data;//马赛克的个数var numTileRows = 25;var numTileCols = 25;//每个马赛克的尺寸var tileWidth = imageData.width/numTileCols;var tileHeight = imageData.height/numTileRows;//r,c 是每个马赛克块的行和列for (var r=0; r<numTileRows; r++){for (var c=0; c<numTileCols; c++){//为每个马赛克块设置颜色var red = Math.floor(Math.random()*255);var green = Math.floor(Math.random()*255);var blue = Math.floor(Math.random()*255);//tr, tc是每个马赛克块的实际像素所在的行和列for (var tr=0; tr<tileHeight; tr++){for (var tc=0; tc<tileWidth; tc++){/* trueX, trueY是像素的真实位置 当前块的列数（c）乘以块的宽度得到当前块左边的x坐标， 再加上像素的列（tc）得到像素的x坐标， 即trueX。 trueY同理 */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);
});

效果如下图

转载于:https://my.oschina.net/yuewawa/blog/609901