canvas基础—04像素之马赛克

电玩女神 2022-03-19 15:24 264阅读 0赞

demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>canvas学习</title>
    <style>
    body{background: black;color:white;font-size:30px;}
    #c1{background: white}
    span{color: white}
    </style> 
    <script type="text/javascript">
        window.onload = function(){
            var oC = document.getElementById('c1')
            var oGC = oC.getContext('2d')
    
            var yImg = new Image()
            yImg.onload = function(){
                draw(this)
            }
    
            yImg.src = '1.png'
            function draw(obj) {
                oC.width = obj.width
                oC.height = obj.height * 2
                oGC.drawImage(obj,0,0) // drawImage(oImg,x,y,w,h) 
                var oImg = oGC.getImageData(0,0,obj.width,obj.height)//获取图像数据（x,y,w,h）
                var w = oImg.width //图片一行的个数
                var h = oImg.height //图片一列的个数
                 //***
                var newImage = oGC.createImageData(obj.width,obj.height)//createImageData(w,h)生成新的像素矩阵
    
                var stepW = Math.floor(w/10)
                var stepH = Math.floor(h/10)
    
                for(var i = 0;i<stepH;i++){ //每一行
                    for(var j = 0;j<stepW;j++){ //每一列
                        // 随机取某一个区域的颜色
                        var color = getXY(oImg,j*10+Math.floor(Math.random()*10),i*10+Math.floor(Math.random()*10))
                        
                        // 该区域所有的颜色都要变成这个颜色值
                        for(var k =0;k<10;k++){
                            for(var l=0;l<10;l++){
                                setXY(newImage,j*10+l,i*10+k,color)
                            }
                        }
                    }
                }
    
                oGC.putImageData(newImage,0,obj.height)
            }
    
            // 返回该像素点的颜色
            function getXY(obj,x,y) {
                var w =obj.width //100
                var h = obj.height //100
                var d = obj.data
                var color = []
    
                color[0] = d[4*(y*w+x)]  //4(y*w+x)的结果是算出这一行以前的所有值，假设是一个10*10就好理解
                color[1] = d[4*(y*w+x)+1]
                color[2] = d[4*(y*w+x)+2]
                color[3] = d[4*(y*w+x)+3]
                return color
            }
    
            function setXY(obj,x,y,color){
                var w =obj.width //100
                var h = obj.height //100
                var d = obj.data
                d[4*(y*w+x)] = color[0] //4(y*w+x)的结果是算出这一行以前的所有值，假设是一个10*10就好理解
                d[4*(y*w+x)+1] = color[1]
                d[4*(y*w+x)+2] = color[2]
                d[4*(y*w+x)+3] = color[3]
            }
        }
    
    </script>
    </head>
    <body>
    
    <canvas id="c1" width="1000" height="1000">
    	<span>不支持canvas浏览器</span>
    </canvas>
    </body>
    </html>

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220319/b19ed19aa7cc41b9bf84150b8b053a76.png