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 相关文章推荐
jquery ajax请求实例深入解析
Nov 26 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 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基于IMAP收取邮件的方法示例
2017/08/07 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
简单的python后台管理程序
2017/04/13 Python
python3.6的venv模块使用详解
2018/08/01 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
大学运动会通讯稿
2014/01/28 职场文书
安全演讲稿大全
2014/05/09 职场文书
广播体操比赛口号
2014/06/10 职场文书
白鹤梁导游词
2015/02/06 职场文书
雨中的树观后感
2015/06/03 职场文书
趣味运动会加油词
2015/07/18 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书