JS实现马赛克图片效果完整示例

本文实例讲述了JS实现马赛克图片效果。分享给大家供大家参考，具体如下：

整体逻辑：获取oldImg图片的像素信息，以5*5为单位，在5*5单位中取到一个随机像素并赋值给5*5中的所有像素点，加以循环，以实现马赛克效果。

  
    
    
    
      * {
 margin: 0;
 padding: 0;
      }
      body {
 background-color: grey;
 text-align: center;
      }
      #myCanvas {
 background-color: rgba(250, 0, 0, 0.3);
      }
    
  
  
    
  
  

更多关于Javascript相关内容还可查看本站专题：《Javascript+HTML5特效与技巧汇总》、《Javascript图形绘制技巧总结》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript数学运算用法总结》

希望本文所述对大家Javascript程序设计有所帮助。