本文实例为大家分享了canvas实现画图、滤镜效果的具体代码，供大家参考，具体内容如下

1、用canvas来实现画图的代码如下：

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < > </ >
  <style media=\"screen\">
    body {background:black; text-align:center}
    #v1 {background:white}
  </style>
  < >
    window. =function () {
      let oV=document.getElementById(\'v1\');
      let gd=oV.getContext(\'2d\'); //图形上下文——绘图接口
      let oColor=document.getElementById(\'color1\');

      let color;
      oColor. =function () {
        color=this.value;
      }

      let lastX,lastY;
      oV. =function (ev) {

        lastX=ev.offsetX;
        lastY=ev.offsetY;

        oV. =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. =function () {
          oV. =null;
          oV. =null;
        }
        


      }


    }


  </ >
</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>
  <  charset=\"UTF-8\">
  < > </ >
  <style media=\"screen\">
    body {background:black; text-align:center}
    #v1 {background:white}
  </style>
  < >
    window. =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. =function () {
        gd.drawImage(img,0,0);

        oBtn1. =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. =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. =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. =function () {
          //火狐支持，在火狐中点击导出图片会在新窗口打开图片
          let src=oV.toDataURL();
          window.open(src,\"_blank\");

        }



      }
    }


  </ >
</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>

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

\"\"

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章