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執行個體--馬賽克矩形 
