<!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. Cache缓存对象缓存对象

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DemoCache.aspx ...

  2. 一个数如果恰好等于它的因子之和，这个数就称为 "完数 "。例如6=1＋2＋3.编程     找出1000以内的所有完数。

    package a; public class Wanshu { public static void main(String[] args) { for (int i = 1; i <= 10 ...

  3. jenkins远程命令执行利用工具

    昨天看小飞侠写的py的jenkins的脚本,昨天晚上在微信里评论今天写一个JAVA的GUI的tools. 早上花了点时间写一下: code: package com.tools; import jav ...

  4. python_way day15 HTML-DAY2 HTML-DAY2、JS

    python_way day15 HTML-DAY2 html-css回顾 javascript 一.html-css回顾 1.input与+,-号的写法 <!DOCTYPE html> ...

  5. BeanUtils框架的简单运用

    Sun公司的内省API过于繁琐,所以Apache组织结合很多实际开发中的应用场景开发了一套简单.易用的API操作Bean的属性——BeanUtils Beanutils工具包的常用类: •BeanUt ...

  6. iOS - UISwitch

    前言 NS_CLASS_AVAILABLE_IOS(2_0) __TVOS_PROHIBITED @interface UISwitch : UIControl <NSCoding> @a ...

  7. IQ一个人的智力和对科学知识的理解掌握程度。 EQ对环境和个人情绪的掌控和对团队关系的运作能力。 AQ挫折商 一个人面对困境时减除自己的压力、渡过难关的能力。

    IQ: Intelligence Quotient 智商 一个人的智力和对科学知识的理解掌握程度. EQ: Emotional Quotient 情商 一个人对环境和个人情绪的掌控和对团队关系的运作能 ...

  8. chrome的input默认样式黄色背景以及选中加粗的边框处理

    问题描述: chrome输入用户名和密码,然后浏览器自己有记忆功能,等再次登录的时候,他会显示chrome默认的黄色背景色,还有选中时周围会有很粗的边框 解决方案: 去掉黄色背景,给input添加au ...

  9. 【夯实Mysql基础】记一次mysql语句的优化过程！

      1. [事件起因] 今天在做项目的时候,发现提供给客户端的接口时间很慢,达到了2秒多,我第一时间,抓了接口,看了运行的sql,发现就是 2个sql慢,分别占了1秒多. 一个sql是 链接了5个表同 ...

  10. [html] Webp、Apng图片格式

    WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式.图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间. 与JPEG相同,WebP是一种有损压缩.但谷 ...