canvas绘制圆形马赛克方法二

最新推荐文章于 2023-05-30 17:38:37 发布

爱笑的小老鼠

最新推荐文章于 2023-05-30 17:38:37 发布

阅读量455

点赞数

文章标签： canvas js html5

本文链接：https://blog.csdn.net/sinat_41541913/article/details/113388619

版权

因某些项目需求：必须先绘制整出整个图片在打马赛克，“canvas绘制圆形马赛克方法一”中方式不能满足，故用以下方式实现：
方法简介：
先绘制出整个图片在画布a上，在将马赛克数据copy到画布b，通过裁剪画布b实现圆形马赛克，最后将马赛克部分重新画到画布a上：
效果如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        canvas{
            position: absolute;
            left:0;
            top:0;
        }
        .canvas1{
            left: 0;
        }
        .canvas2{
            right:0;
            left: auto;
        }
    </style>
    <meta charset="utf-8" />


</head>

<body onload="" style="background-color:#D0D0D0;">
<canvas id="canvas1" class="canvas1" width="840" height="560" ></canvas>
<canvas id="canvas2" class="canvas2" width="840" height="560" ></canvas>
<script type="text/javascript">
/* 先绘制整个图片 再将马赛克部分copy另一个canvas 处理圆形 在复制回去 */
    var canvas2 = document.getElementById("canvas2");
    var canvas1 = document.getElementById("canvas1");
    var ctx2 = canvas2.getContext("2d");
    var ctx1 = canvas1.getContext("2d");

    var aImg = new Image();
    aImg.src = '460-259.jpg';
    aImg.onload = function(){
        draw(this);
    }
   

    function draw(obj){
        //绘制整个图片
        ctx1.drawImage(obj,100,100,690,388);

        //获取左边图像的局部坐标的部分像素
        var oImg = ctx1.getImageData(400,145,270,270);
        var w = oImg.width;
        var h = oImg.height;
        //马赛克的程度，数字越大越模糊
        var num = 4;
        //等分画布
        var stepW = w/num;
        var stepH = h/num;
        //这里是循环画布的像素点
        for(var i=0;i<stepH;i++){
            for(var j=0;j<stepW;j++){
                //获取一个小方格的随机颜色，这是小方格的随机位置获取的
                var color = getXY(oImg,j*num+Math.floor(Math.random()*num),i*num+Math.floor(Math.random()*num));
                //这里是循环小方格的像素点，
                for(var k=0;k<num;k++){
                    for(var l=0;l<num;l++){
                        //设置小方格的颜色
                        setXY(oImg,j*num+l,i*num+k,color);
                    }
                }

            }
        }
        ctx2.putImageData(oImg,400,145);
        ctx2.globalCompositeOperation = 'destination-in'
        ctx2.beginPath()
        ctx2.ellipse(535, 280,135, 100, 0,0, 2 * Math.PI);
        ctx2.closePath()
        ctx2.fill()
        ctx2.clip();//裁剪画布
        ctx1.drawImage(canvas2,400,145,270,270,400,145,270,270);
      
    }

    function getXY(obj,x,y){
        var w = obj.width;
        var h = obj.height;
        var d = obj.data;
        var color = [];
        color[0] =     obj.data[4*(y*w+x)];
        color[1] =     obj.data[4*(y*w+x)+1];
        color[2] =     obj.data[4*(y*w+x)+2];
        color[3] =     obj.data[4*(y*w+x)+3];
        return color;
    }

    function setXY(obj,x,y,color){
        var w = obj.width;
        var h = obj.height;
        var d = obj.data;
        obj.data[4*(y*w+x)] = color[0];
        obj.data[4*(y*w+x)+1] = color[1];
        obj.data[4*(y*w+x)+2] = color[2];
        obj.data[4*(y*w+x)+3] = color[3];
    }
</script>
</body>
</html>

爱笑的小老鼠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制圆形马赛克方法二

因某些项目需求：必须先绘制整出整个图片在打马赛克，“canvas绘制圆形马赛克方法一”中方式不能满足，故用以下方式实现：方法简介：先绘制出整个图片在画布a上，在将马赛克数据copy到画布b，通过裁剪画布b实现圆形马赛克，最后将马赛克部分重新画到画布a上：效果如下：代码如下：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charse
复制链接

扫一扫