html5＜canvas操作像素之添加杂色，动态倒影逐行显示＞

最新推荐文章于 2022-03-23 23:18:48 发布

sensus森森

最新推荐文章于 2022-03-23 23:18:48 发布

阅读量510

点赞数

分类专栏： HTML4/HTML5 文章标签：杂色

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

版权

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);
            var pixelArr = rand(imgData.width*imgData.height,10);
            for (var i=0; i<pixelArr.length; i++) {
                imgData.data[pixelArr[i]*4+0] = parseInt(255*Math.random());
                imgData.data[pixelArr[i]*4+1] = parseInt(255*Math.random());
                imgData.data[pixelArr[i]*4+2] = parseInt(255*Math.random());
                imgData.data[pixelArr[i]*4+3] = parseInt(255*Math.random());
            }
            cobj.putImageData(imgData, 200,240);

            // alert(rand(1000,100))
            //封装产生随机数的函数
            function rand(sum,num){
                var arr = [];
                for(var i=0;i<sum;i++){
                    arr.push(i);
                }
                var newArr = [];
                for(var i=0;i<sum/num;i++){
                    newArr.push(arr.splice(Math.floor(arr.length*Math.random()),1));
                }
                return newArr;
            }
        }
        </script>
    </head>
    <body>
    <canvas id="canvas" width=500 height=500>
    </canvas>
    <img src="./1.jpg" height="783" width="590" id="img" hidden/>
    </body>

</html>

效果:

sensus森森

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5＜canvas操作像素之添加杂色，动态倒影逐行显示＞

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

扫一扫