js canvas实现画图、滤镜效果


Posted in Javascript onNovember 27, 2018

本文实例为大家分享了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实现画图、滤镜效果

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

Javascript 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
JavaScript iframe的相互操作浅析
Oct 14 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
jquery禁用右键示例
Apr 28 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
js实现登录与注册界面
Nov 01 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 Javascript
js canvas画布实现高斯模糊效果
Nov 27 #Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 #Javascript
Vue数据双向绑定的深入探究
Nov 27 #Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 #Javascript
微信小程序实现日历功能
Nov 27 #Javascript
微信小程序实现打卡日历功能
Sep 21 #Javascript
微信小程序实现时间预约功能
Nov 27 #Javascript
You might like
通过php添加xml文档内容的方法
2015/01/23 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
django初始化数据库的实例
2018/05/27 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
个人自荐信
2013/12/05 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
大学生见习报告范文
2014/11/03 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
KTV员工管理制度
2015/08/06 职场文书
新员工入职感想
2015/08/07 职场文书