js canvas实现绘图和滤镜效果

本文中的示例共享用于绘画和滤镜效果的画布的特定代码js网页画图js网页画图，以供您参考. 具体内容如下

1. 使用画布绘制的代码如下:

<!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>

代码的运行结果如下:

2. 使用画布实现滤镜效果实际上是像素级操作. 代码如下: 1.jpg是在Internet上找到的风景图片，您可以自己找到.

<!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 () {
     //获取像素区
     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 () {
     //获取像素区
     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 () {
     //获取像素区
     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>

代码运行效果的屏幕截图: 图片显示泛黄效果.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-240353-1.html