欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js canvas实现画图、滤镜效果

程序员文章站 2022-06-22 15:42:53
本文实例为大家分享了canvas实现画图、滤镜效果的具体代码,供大家参考,具体内容如下 1、用canvas来实现画图的代码如下:

本文实例为大家分享了canvas实现画图、滤镜效果的具体代码,供大家参考,具体内容如下

1、用canvas来实现画图的代码如下:

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

代码的运行结果如图:

js canvas实现画图、滤镜效果

2、用canvas来实现滤镜效果,其实就是像素级操作。代码如下:代码中的1.jpg为网上找的风景图,可自行寻找。

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

代码运行效果截图:该图为变黄效果。

js canvas实现画图、滤镜效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。