html5<canvas操作像素之反相、窗帘、模糊特效>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            canvas{
                background:#eee;
            }
        </style>
        <script>
            window.onload = function(){
                var canvas = document.getElementById('canvas');
                var cobj = canvas.getContext('2d');//获取绘图环境
                var img = document.getElementById('img');
                cobj.drawImage(img,0,0,200,240);//画图片
                var imgData=cobj.getImageData(0,0,200,240);//得到图片信息
                //复制出同样规格,颜色为红色的图片
                // for (var i=0; i<imgData.width*imgData.height; i++) {
                //     imgData.data[i*4+0]=255;
                //     imgData.data[i*4+1]=0;
                //     imgData.data[i*4+2]=0;
                //     imgData.data[i*4+3]=255;
                // }
                //反向
                // for (var i=0; i<imgData.width*imgData.height; i++) {
                //     imgData.data[i*4+0] = 255 - imgData.data[i*4+0];
                //     imgData.data[i*4+1] = 255 - imgData.data[i*4+1];
                //     imgData.data[i*4+2] = 255 - imgData.data[i*4+2];
                //     imgData.data[i*4+3] = imgData.data[i*4+3];
                // }
                // cobj.putImageData(imgData,200,240);//复制出新的图片

                // fanxiang(imgData);//调用反向函数
                // menlian(imgData,4);//调用门帘函数
                vague(imgData,1000);//调用模糊函数
                //封装反向函数
                function fanxiang(imgData){
                    for (var i=0; i<imgData.width*imgData.height; i++) {
                        imgData.data[i*4+0] = 255 - imgData.data[i*4+0];
                        imgData.data[i*4+1] = 255 - imgData.data[i*4+1];
                        imgData.data[i*4+2] = 255 - imgData.data[i*4+2];
                        imgData.data[i*4+3] = imgData.data[i*4+3];
                    }
                    cobj.putImageData(imgData,200,240);
                }

                //门帘效果
                function menlian(imgData,num){
                    for (var i=0; i<imgData.width*imgData.height; i++) {
                        if(i%num == 0){
                            imgData.data[i*4+0] = 0;
                            imgData.data[i*4+1] = 0;
                            imgData.data[i*4+2] = 0;
                            imgData.data[i*4+3] = 0;
                        }
                    }
                    cobj.putImageData(imgData,200,240);
                }

                //模糊效果
                function vague(imgData,num){
                    for(var j=0;j<num;j++){
                        for (var i=0; i<imgData.width*imgData.height; i++) {
                            imgData.data[i*4+0] = (imgData.data[(i-1)*4+0]+imgData.data[i*4+0]+imgData.data[(i+1)*4+0])/3;
                            imgData.data[i*4+1] = (imgData.data[(i-1)*4+1]+imgData.data[i*4+1]+imgData.data[(i+1)*4+1])/3;
                            imgData.data[i*4+2] = (imgData.data[(i-1)*4+2]+imgData.data[i*4+2]+imgData.data[(i+1)*4+2])/3;
                            imgData.data[i*4+3] = imgData.data[i*4+3];
                        }
                    }
                    cobj.putImageData(imgData,200,240); 
                }
            }
        </script>
    </head>
    <body>
    <canvas id="canvas" width=500 height=500>
    </canvas>
    <img src="./1.jpg" height="330" width="268" id="img" hidden/>
    </body>

</html>



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值