马赛克原理

来源：互联网发布：java编写文件管理系统编辑：程序博客网时间：2024/04/30 10:16

http://www.hui12.com/nbin/canvas/c2.html

https://nbin2008.github.io/demo/mosaic/index2.html

<!DOCTYPE html><html><head><meta charset="utf-8"><title>马赛克原理</title><script src="js/jquery-2.1.0.js"></script></head><body><canvas id="mycanvas" width="500" height="500"></canvas><script type="text/javascript">var mycanvas = document.getElementById('mycanvas');var ctx = mycanvas.getContext('2d');var imageData = ctx.createImageData(500,500);console.log(imageData);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 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++ ){//获取像素width，heightvar 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;};}};};ctx.putImageData(imageData,0,0);</script></body></html>

0 0