canvas基础—04像素之马赛克

最新推荐文章于 2024-06-07 11:38:47 发布

jiaojsun

最新推荐文章于 2024-06-07 11:38:47 发布

阅读量310

点赞数

分类专栏： canvas基础

本文链接：https://blog.csdn.net/jiaojsun/article/details/87550719

版权

canvas基础专栏收录该内容

12 篇文章 1 订阅

订阅专栏

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>

效果

jiaojsun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas基础—04像素之马赛克

demo.html&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&g..
复制链接

扫一扫

专栏目录