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 相关文章推荐
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
javascript中Number的方法小结
Nov 21 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 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
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
js实现简单数字变动效果
2017/11/06 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
python爬虫正则表达式之处理换行符
2018/06/08 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
统计每一学生的平均成绩
2014/06/06 面试题
C#和SQL Server的面试题
2016/08/12 面试题
写好自荐信要注意的问题
2013/11/10 职场文书
优秀学生自我鉴定范例
2013/12/18 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
经典爱情感言
2015/08/03 职场文书
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android