欢迎来到[自学php网] ①群 AG亚游集团

AG亚游集团 > 网站前端 > javascript >

js canvas实现画图、滤镜效果

来源:未知 ?? 时间:2018-11-28 17:04?作者:小飞侠

[导读] 本文实例为大家分享了canvas实现画图、滤镜效果的具体代码,供大家参考,具体内容如下 1、用canvas来实现画图的代码如下: !DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/titlestylemedia=scre...

本文实例为大家分享了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>

代码的运行结果如图:

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>

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


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有AG亚游集团

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

因尝试收购 高通前执行董事长已失去董事会提名资格 乒联:中国男团世乒赛20冠 今年大赛表现抢眼 莎娃坦言连败时感觉很痛苦 一直在努力重返正轨 外媒:中国成为国际电子竞技领域有力竞争者 “代表通道”首亮相 两会上三条通道是怎么来的? “白马失蹄”老板电器净利增速骤降 一周两日跌停 美媒披露政府贸易高官与钢铁利益集团互相利用 人民日报:中美如果对抗性博弈 一定是美国输不起 交通运输部:网络车司机无证上岗或被列失信黑名单 格德斯:鲁能队友对我很友好 适应上没什么问题 俄军安-26运输机在叙坠毁 黑匣子已找到并立案调查 墨菲赞小特攻击力只逊火箭:但我会比他先到6
[新浪彩票]05日竞彩盘口剖析:曼联客战恐难大胜 皇马主席:C罗打进倒钩后 西班牙国王都打电话祝贺 遇害空姐所属航空公司:将免费为夜班员工提供住宿 360公司紧急澄清 网传定增价为8元系误读 孩子被锁车里哭一头汗 妈妈拒砸窗:20分钟没事的 清华教授罗永章:建议加快建设烟大海底隧道 人民日报:为正当执法的民警撑腰 不能含糊 霍启刚:粤港澳大湾区城市群可联合举办国际赛事 印媒:中印军队边界巡逻会留下罐头等以宣示主权 周一金价微跌40美分 盘中一度创今年新低 民国时教科书审定会注意哪些问题? 美宣布恢复对埃及军事援助 30年来已援助800亿美元
黑色系午后跌幅扩大 螺纹钢跌近3%创近一个半月新低 传美团打车将于3月中旬在北京上海等7个城市开站 老兵找“老连长” 网友提供线索:五六年前已过世 墨总统候选人公开抨击特朗普 称不做被敲打的玩偶 女子悬赏2万寻被盗摩托 窃贼同伙想领赏金打电话 多家药企召回缬沙坦 手机扫码可查召回药品 这头牛到底谁家的?两村民花6200元做“亲子鉴定” 长安街东二环等多条道路明上午采取临时交通管制 海外赛区启动!中国城市足球联赛改名城市足球超级联赛 开什么店比较有市场 最有前景的十大行业 投资小型加工厂 投资两万的小型加工厂 AG亚游集团