for循環
for( var i = blurR ; i < cnvA.height - blurR ; i ++ )
for( var j = blurR ; j < cnvA.width - blurR ; j ++ )
為什么i和j是這樣對應的?不是按照二維數組的理解方式?應該這樣嗎？
for(var i=blurR;i<cnvA.width-blurR;i++){
for(var j=blurR;j<cnvA.height-blurR;j++)
3 回答
舉報
0/150
提交
取消
2019-05-09
<!DOCTYPE?html> <html> <head?lang="en"> ????<meta?charset="UTF-8"> ????<title></title> ????<style> ?.btn{ ????????????text-decoration:?none; ????????????border:?1px?solid?black; ????????????border-radius:?5px; ????????????background:?white; ????????????color:?black; ????????????padding:?10px; ????????????box-shadow:?5px?5px?5px?#b7b7b7; ????????} ????</style> </head> <body> <div?style="margin:20px?auto;width:1168px;"> ????<canvas?id="canvasa"?width="582"?height="388"?style="display:block;float:left;border:1px?solid?#aaa;"></canvas> ????<canvas?id="canvasb"?width="582"?height="388"?style="display:block;float:right;border:1px?solid?#aaa;"></canvas> ????<div?style="clear:both;"></div> ????<div?style="text-align:center;margin-top:50px;font-size:20px;"> ????????<a?href="javascript:blurEffect()"?class="btn">Blur?Effect</a> ????</div> </div> <script> ?var?cnvA=document.getElementById("canvasa"); ????var?cxtA=cnvA.getContext("2d"); ????var?cnvB=document.getElementById("canvasb"); ????var?cxtB=cnvB.getContext("2d"); ????var?image=new?Image(); ????window.onload=function(){ ????????image.src="images/02.jpg"; ????????image.onload=function(){ ????????????cxtA.drawImage(image,0,0,cnvA.width,cnvA.height); ????????} ????}; ????function?blurEffect(){ ????????var?imageData=cxtA.getImageData(0,0,cnvA.width,cnvA.height); ????????var?data=imageData.data; ????????var?tempImageData=cxtA.getImageData(0,0,cnvA.width,cnvA.height); ????????var?tempData=tempImageData.data; ????????var?blurR=3; ????????var?number=(blurR+1+blurR)*(blurR+1+blurR); ????????for(var?i=blurR;i<.height-blurR;i++){ ????????????for(var?j=blurR;j<cnvB.width-blurR;j++){ ????????????????var?sumR=0,sumG=?0,sumB=0; ????????????????for(var?dx=-blurR;dx<=blurR;dx++){ ????????????????????for(var?dy=-blurR;dy<=blurR;dy++){ ????????????????????????var?x=i+dx; ????????????????????????var?y=j+dy; ????????????????????????var?index=x*cnvB.width+y; ????????????????????????sumR+=tempData[index*4+0]; ????????????????????????sumG+=tempData[index*4+1]; ????????????????????????sumB+=tempData[index*4+2]; ????????????????????} ????????????????} ????????????????var?index=i*cnvB.width+j; ????????????????data[index*4+0]=sumR/number; ????????????????data[index*4+1]=sumG/number; ????????????????data[index*4+2]=sumB/number; ????????????} ????????} ????????cxtB.putImageData(imageData,0,0,0,0,cnvB.width,cnvB.height); ????} </script> </body> </html>2019-04-02
圖就是這樣的? 右邊沒有模糊處理
2019-04-02
function blurEffect(){
var imageData=cxtA.getImageData(0,0,cnvA.width,cnvA.height);
var data=imageData.data;
??
var tempImageData=cxtA.getImageData(0,0,cnvA.width,cnvA.height);
var tempData=tempImageData.data;
var blurR=3;
var number=(blurR+1+blurR)*(blurR+1+blurR);
for(var i=blurR;i<cnvA.width-blurR;i++){
for(var j=blurR;j<cnvA.height-blurR;j++){
/*for( var i = blurR ; i < cnvA.height - blurR ; i ++ ){
for( var j = blurR ; j < cnvA.width - blurR ; j ++ ){*/
var sumR=0,sumG=0,sumB=0;
for(var dx=-blurR;dx<=blurR;dx++){
for(var dy=-blurR;dy<=blurR;dy++){
var x=dx+i;
var y=dy+j;
var index=x*cnvA.width+y;
sumR+=tempData[index*4+0];
sumG+=tempData[index*4+1];
sumB+=tempData[index*4+2];
}
}
var index=i*cnvA.width+j;
data[index*4+0]=sumR/number;
data[index*4+1]=sumG/number;
data[index*4+2]=sumB/number;
}
}
cxtB.putImageData(imageData,0,0);
}
我代碼這樣寫后，出來的是一個正方形的模糊圖，但是我的畫布是長方形的啊，原圖的一部分沒模糊