jscanvas實(shí)現(xiàn)畫圖、濾鏡效果

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

創(chuàng)新互聯(lián)建站成立于2013年，先為蘭考等服務(wù)建站，蘭考等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為蘭考企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

1、用canvas來實(shí)現(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的寬和高是寫在標(biāo)簽里的，寫在style里面不起作用-->
<canvas id="v1" width="800" height="600">
</canvas>
</body>
</html>

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

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

2、用canvas來實(shí)現(xiàn)濾鏡效果，其實(shí)就是像素級操作。代碼如下：代碼中的1.jpg為網(wǎng)上找的風(fē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 () {
     //火狐支持，在火狐中點(diǎn)擊導(dǎo)出圖片會在新窗口打開圖片
     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="導(dǎo)出圖片" id="btn4"/>
<canvas id="v1" width="800" height="600">
</canvas>
</body>
</html>

代碼運(yùn)行效果截圖：該圖為變黃效果。

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享題目：jscanvas實(shí)現(xiàn)畫圖、濾鏡效果
文章起源：http://muchs.cn/article22/ihggcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站設(shè)計、用戶體驗(yàn)、響應(yīng)式網(wǎng)站、網(wǎng)站建設(shè)、虛擬主機(jī)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

jscanvas實(shí)現(xiàn)畫圖、濾鏡效果

jscanvas實(shí)現(xiàn)畫圖、濾鏡效果