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

最新推荐文章于 2021-06-28 19:27:29 发布

sensus森森

最新推荐文章于 2021-06-28 19:27:29 发布

阅读量952

点赞数

分类专栏： HTML4/HTML5 文章标签：像素反相

本文链接：https://blog.csdn.net/qq_27682041/article/details/72779361

版权

HTML4/HTML5 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

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

sensus森森

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5＜canvas操作像素之反相、窗帘、模糊特效＞

canvas{ background:#eee; } window.onload = function(){ var canvas = document.getElementById('canvas');
复制链接

扫一扫

专栏目录