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脚本语言在网页中的简单应用
May 13 Javascript
js 获取服务器控件值的代码
Mar 05 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
javascript中expression的用法整理
May 13 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
JavaScript实现留言板案例
Mar 17 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
Javascript 入门基础学习
2010/03/10 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Python骚操作之动态定义函数
2019/03/26 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
python视频按帧截取图片工具
2019/07/23 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
大学生求职简历的自我评价
2013/10/14 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
政风行风评议心得体会
2014/10/21 职场文书
少年犯观后感
2015/06/11 职场文书