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

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

用canvas实现画图、滤镜效果

猜你喜欢