• html5 canvas图片马赛克


    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script>
    window.onload = function (){
        var oc = document.getElementById('c1');
        var ogc = oc.getContext('2d');
        
        var yimg = new Image();
        
        yimg.onload = function ()
        {
            draw(this);
        };
        
        yimg.src = 'img/5-5.jpg';
        
        function draw(obj)
        {
            oc.width = obj.width;
            oc.height = obj.height * 2;
            ogc.drawImage(obj,0,0);
            
            var oimg = ogc.getImageData(0,0,obj.width,obj.height);
            
            var w = oimg.width;
            var h = oimg.height;
            
            var num = 5;
            
            var newimg = ogc.createImageData(obj.width,obj.height);
            
            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(newimg,j*num+l,i*num+k,color);
                        }
                    }
                    
                }
            }
            
            ogc.putImageData(newimg,0,obj.height);
        }
        
        function getXY(obj,x,y)
        {
            var w = obj.width;
            var h = obj.height;
            var d = obj.data;
            
            var color = [];
            
            color[0] = d[ 4*(y*w+x)];
            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;
            var h = obj.height;
            var d = obj.data;
            
            d[ 4*(y*w+x)] = color[0];
            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>
    <style>
    body{
        background:pink;
        }
    #c1{
        background:white;
        }    
    </style>
    </head>
    
    <body>
    <canvas id="c1" width="400" height="400"></canvas>
    </body>
    </html>
  • 相关阅读:
    poj 3304线段与直线相交
    poj 1039 几何没思路
    zoj 1010 (线段相交判断+多边形求面积)
    poj 1654 Area (多边形求面积)
    poj 3348--Cows(凸包求面积)
    zoj 2107&&hdu 1007最近点对问题
    Codeforces Round #260 (Div. 2)AB
    MMORPG大型游戏设计与开发(part1 of net)
    MMORPG大型游戏设计与开发(规范)
    MMORPG大型游戏设计与开发(构架)
  • 原文地址:https://www.cnblogs.com/mayufo/p/4295320.html
Copyright © 2020-2023  润新知