<!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title>马赛克</title>
     <style>
         body{background:#000;}
         canvas{background: #fff; margin-left:500px;}
     </style>
     <script>
         window.onload = function(){
             var cvs = document.getElementById('canvas1');
             var cxt = cvs.getContext('2d');

             var oImg = new Image();
             oImg.src = '1.jpg';
             oImg.onload = function(){
                 cxt.drawImage(this,0,0);
                 var imgData = cxt.getImageData(0,0,oImg.width,oImg.height);
                 var newImgData = cxt.createImageData(oImg.width,oImg.height);
                 var num = 10;//该参数指定马赛克格子的大小

                 var stepW = oImg.width/num;//一行内格子数
                 var stepH = oImg.height/num;//一列内格子数

                 for(var j=0;j<stepH;j++){
                     for(var i=0;i<stepW;i++){
                         //获取10*10方格内随机的一个颜色
                         var colors = getXY(imgData,i*num+Math.floor(Math.random()*num),j*num+Math.floor(Math.random()*num));
                         //让10*10方格的颜色都为随机色
                         for(var s=0;s<num;s++){
                             for(var t=0;t<num;t++){
                                 setXY(newImgData,i*num+t,j*num+s,colors);
                             }
                         }

                     }
                 }

                 cxt.putImageData(newImgData,0,oImg.height+50);
             }
         }

         function getXY(imgData,x,y){
             var result = [];
             result.push(imgData.data[(imgData.width*y+x)*4]);
             result.push(imgData.data[(imgData.width*y+x)*4+1]);
             result.push(imgData.data[(imgData.width*y+x)*4+2]);
             result.push(imgData.data[(imgData.width*y+x)*4+3]);
             return result;
         }

         function setXY(imgData,x,y,colors){
             imgData.data[(imgData.width*y+x)*4] = colors[0];
             imgData.data[(imgData.width*y+x)*4+1] = colors[1];
             imgData.data[(imgData.width*y+x)*4+2] = colors[2];
             imgData.data[(imgData.width*y+x)*4+3] = colors[3];
         }

     </script>

 </head>
 <body>
 <canvas id="canvas1" width="500" height="500"></canvas>

 </body>
 </html>

HTML5自学笔记[ 21 ]canvas绘图实例之马赛克的更多相关文章

  1. HTML5自学笔记[ 15 ]canvas绘图实例之钟表

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. HTML5自学笔记[ 11 ]canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

  7. HTML5自学笔记[ 24 ]canvas绘图之星空草地

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. HTML5自学笔记[ 17 ]canvas绘图基础4

    绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...

  9. HTML5自学笔记[ 16 ]canvas绘图基础3

    canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量 旋转:rotate(弧度),弧度=角度*Mat ...

随机推荐

  1. HDU 4870 Rating 概率DP

    Rating Time Limit:5000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Statu ...

  2. C++ const 的全面总结[转]

    C++中的const关键字的用法非常灵活,而使用const将大大改善程序的健壮性,本人根据各方面查到的资料进行总结如下,期望对朋友们有所帮助. Const 是C++中常用的类型修饰符,常类型是指使用类 ...

  3. 《安全智库》:48H急速夺旗大战通关writeup（通关策略）

    作者:ByStudent   题目名字 题目分值 地址 MallBuilder2 350 mall.anquanbao.com.cn MallBuilder1 200 mall.anquanbao.c ...

  4. 选择屏幕(Selection Screen)

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  5. 微博传播数量和传播深度的预测--基于pyspark和某个回归算法

    8-28决定参加一下这个千万条的数据处理任务,因为场景和自己做过的一个回归分析预测差不多,第一天开始在小规模的数据上做准备工作. 第二次大修改版本 date 20160829 星期一¶ 原始数据处理, ...

  6. 面向对象---prototype

    构造函数里的this,外面的new <script> //用工厂方式构造对象 function createPerson(name, sex) //构造函数 { //假想的系统内部工作流程 ...

  7. php wamp 配置虚拟主机

    apeach  配置: 还有是:E:\wamp\bin\apache\Apache2.4.4\conf 目录下有个 http.conf文件中,有一个需要取消注释, # Virtual hostsInc ...

  8. XML约束——DTD约束

    参考: 方立勋老师的讲课视频.   什么是XML约束 •在XML技术里,可以编写一个文档来约束一个XML文档的书写规范,这称之为XML约束. 为什么需要XML约束 常用的约束技术 •XML DTD • ...

  9. Python中的__new__()方法的使用

    __new__() 函数只能用于从object继承的新式类. 先看下object类中对__new__()方法的定义: class object:   @staticmethod # known cas ...

  10. Python SSH登陆--pexpect，pxssh

    from pexpect import pxssh host = '192.168.80.139'user = 'allen'password = 'allen'command = 'df -h' d ...