快捷導航

js canvas實現(xiàn)畫圖、濾鏡效果

更新時間：2018年11月27日 16:36:16 作者：scy_fighting

這篇文章主要為大家詳細介紹了js canvas實現(xiàn)畫圖、濾鏡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了canvas實現(xiàn)畫圖、濾鏡效果的具體代碼，供大家參考，具體內(nèi)容如下

1、用canvas來實現(xiàn)畫圖的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style media="screen">
  body {background:black; text-align:center}
  #v1 {background:white}
 </style>
 <script>
  window.onload=function () {
   let oV=document.getElementById('v1');
   let gd=oV.getContext('2d'); //圖形上下文——繪圖接口
   let oColor=document.getElementById('color1');

   let color;
   oColor.onchange=function () {
    color=this.value;
   }

   let lastX,lastY;
   oV.onmousedown=function (ev) {

    lastX=ev.offsetX;
    lastY=ev.offsetY;

    oV.onmousemove=function (ev) {
     gd.beginPath();//清除之前所有的路徑
     
     gd.moveTo(lastX,lastY);
     gd.lineTo(ev.offsetX,ev.offsetY);

     lastX=ev.offsetX;
     lastY=ev.offsetY;

     gd.strokeStyle=color;//用獲取到的顏色作為繪制顏色
     gd.stroke();

    }
    oV.onmouseup=function () {
     oV.onmousemove=null;
     oV.onmouseup=null;
    }
    
   }

  }


 </script>
</head>
<body>
<input type="color" id="color1" /><br/>
<!--canvas的寬和高是寫在標簽里的，寫在style里面不起作用-->
<canvas id="v1" width="800" height="600">
</canvas>
</body>
</html>

代碼的運行結(jié)果如圖：

2、用canvas來實現(xiàn)濾鏡效果，其實就是像素級操作。代碼如下：代碼中的1.jpg為網(wǎng)上找的風景圖，可自行尋找。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style media="screen">
  body {background:black; text-align:center}
  #v1 {background:white}
 </style>
 <script>
  window.onload=function () {
   let oV=document.getElementById('v1');
   let oBtn1=document.getElementById('btn1');
   let oBtn2=document.getElementById('btn2');
   let oBtn3=document.getElementById('btn3');
   let oBtn4=document.getElementById('btn4');
   let gd=oV.getContext('2d');

   let img=new Image();
   img.src='1.jpg';
   img.onload=function () {
    gd.drawImage(img,0,0);

    oBtn1.onclick=function () {
     //獲取像素區(qū)
     let imageData=gd.getImageData(0,0,oV.width,oV.height);

     //data[(r*W+c)*4]
     for(let r=0;r<oV.height;r++){
      for(let c=0;c<oV.width;c++){
       let avg=(imageData.data[(r*oV.width+c)*4]+imageData.data[(r*oV.width+c)*4+1]+imageData.data[(r*oV.width+c)*4+2])/3;

       imageData.data[(r*oV.width+c)*4]=imageData.data[(r*oV.width+c)*4+1]=imageData.data[(r*oV.width+c)*4+2]=avg;
      }
     }
     gd.putImageData(imageData,0,0);
    }

    oBtn2.onclick=function () {
     //獲取像素區(qū)
     let imageData=gd.getImageData(0,0,oV.width,oV.height);

     //data[(r*W+c)*4]
     for(let r=0;r<oV.height;r++){
      for(let c=0;c<oV.width;c++){
       imageData.data[(r*oV.width+c)*4+2]=0;

0      }
     }
     gd.putImageData(imageData,0,0);
    }

    oBtn3.onclick=function () {
     //獲取像素區(qū)
     let imageData=gd.getImageData(0,0,oV.width,oV.height);

     //data[(r*W+c)*4]
     for(let r=0;r<oV.height;r++){
      for(let c=0;c<oV.width;c++){
       imageData.data[(r*oV.width+c)*4]=0;
       imageData.data[(r*oV.width+c)*4+2]=0;
      }
     }
     gd.putImageData(imageData,0,0);
    }

    oBtn4.onclick=function () {
     //火狐支持，在火狐中點擊導出圖片會在新窗口打開圖片
     let src=oV.toDataURL();
     window.open(src,"_blank");

    }



   }
  }


 </script>
</head>
<body>
<input type="button" value="變灰" id="btn1"/>
<input type="button" value="變黃" id="btn2"/>
<input type="button" value="變綠" id="btn3"/>
<input type="button" value="導出圖片" id="btn4"/>
<canvas id="v1" width="800" height="600">
</canvas>
</body>
</html>

代碼運行效果截圖：該圖為變黃效果。