canvas实例--马赛克矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
body,html{
height:100%;
overflow: hidden;
background: #616161;
}
#test{
position: absolute;
left:50%;
top:50%;
transform: translate3d(-50%,-50%,0);
background: white;
margin:auto;
}
</style>
</head>
<body>
<canvas id="test">
<span>您的浏览器不支持canvas操作！！</span>
</canvas>
</body>
</html>
<script>
var canvas=document.querySelector("#test");
if(canvas.getContext) {
var ctx = canvas.getContext(\'2d\');
var img=new Image();
img.src=\'img/2.jpg\';
img.onload=function () {
canvas.width=img.width;
canvas.height=img.height;
draw();
};
function draw() {
ctx.drawImage(img,0,0);
//获取数据：图片的长度，图片的宽度
var oldImgData=ctx.getImageData(0,0,img.width,img.height);
var newImgData=ctx.createImageData(img.width,img.height);
//马赛克
/*步骤：
1. 选取一个马赛克矩形
2. 从马赛克矩形中随机抽出一个像素点的信息(rgba)
3. 将整个马赛克矩形中的像素点信息统一调成随机抽出的那个
*/
//改变size值会使图形由清晰变得模糊
var size=10;
for(var i=0;i<oldImgData.width/size;i++){
for(var j=0;j<oldImgData.width/size;j++){
//(i,j)为每一个马赛克矩形的坐标：(0,0)：代表(0,0)--(4,4)
// (0,1)：代表(0,5)--(4,9)
// (1,0)：代表(5,0)--(9,4)
//随机拿到马赛克矩形，Math.random( )为[0,1),Math.random()*size为[0,5)，Math.floor()向下取整。
//为第一个马赛克矩形设计getPxInfo(oldImgData,Math.floor(Math.random()*size),Math.floor(Math.random()*size));
//为所有马赛克矩形设计getPxInfo(oldImgData,i*size+Math.floor(Math.random()*size),j*size+Math.floor(Math.random()*size));
/*(0,1)：[0,4],[5,9] 交叉形成(0,5)--(4,9)
(1,0)：[5,9],[0,4] 交叉形成(5,0)--(9,4)
*/
var color=getPxInfo(oldImgData,i*size+Math.floor(Math.random()*size),j*size+Math.floor(Math.random()*size));
for(var a=0;a<size;a++){
for(var b=0;b<size;b++){
setPxInfo(newImgData,i*size+a,j*size+b,color);
}
}
}
}
//每次都清除上一个马赛克图形-----ctx:画布上的图；canvas：画布
ctx.clearRect(0,0,ctx.width,ctx.height);
// ctx.putImageData(newImgData,img.width,0);模糊与原图
ctx.putImageData(newImgData,0,0);
function getPxInfo(myData,x,y) {
var color=[];
var data=myData.data;
var w=myData.width;
var h=myData.height;
color[0]=data[(y*w+x)*4];
color[1]=data[(y*w+x)*4+1];
color[2]=data[(y*w+x)*4+2];
color[3]=data[(y*w+x)*4+3];
return color;
}
function setPxInfo(myData,x,y,color) {
var data=myData.data;
var w=myData.width;
var h=myData.height;
data[(y*w+x)*4]= color[0];
data[(y*w+x)*4+1]=color[1];
data[(y*w+x)*4+2]= color[2];
data[(y*w+x)*4+3]=color[3];
}
}
}
</script>
canvas实例--马赛克矩形 
