zoukankan      html  css  js  c++  java
  • 基于HTML5 Canvas生成粒子效果的人物头像

    前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单。今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下来该图片会被打散成许多粒子,然后慢慢的重组成图片,鼠标滑过图片时粒子还会出现浮动的动画特效,看上去非常酷。

    在线预览   源码下载

    HTML代码如下

    <p class="center">Change pixel resolution <input type="range" min="4" max="100" value="32" id="range" /> <span id="output">32</span></p>
    <div class="thumb">
             <img src="img/1.jpg" id="dolly1" />
            <img src="img/2.jpg" id="dolly2" />
            <img src="img/3.jpg" id="dolly3" />
    </div>

    定义了一个滑竿和3张待模糊的图片。 JavaScript代码如下

    var dolly1 = document.getElementById('dolly1')
          var dolly2 = document.getElementById('dolly2')
          var dolly3 = document.getElementById('dolly3')
          var pixelOpts = [ { resolution: 8 } ]
          var pixelDolly1 = dolly1.closePixelate( pixelOpts )
          var pixelDolly2 = dolly2.closePixelate( pixelOpts )
          var pixelDolly3 = dolly3.closePixelate( pixelOpts )
          var range = document.getElementById('range')
          var output = document.getElementById('output')
    
          range.addEventListener( 'change', function( event ) {
            var res = parseInt( event.target.value, 10 )
            res = Math.floor( res / 2 ) * 2
            res = Math.max( 4, Math.min( 100, res ) )
            output.textContent = res
            // console.log( res );
            pixelOpts = [ { resolution: res } ]
            pixelDolly1.render( pixelOpts )
            pixelDolly2.render( pixelOpts )
            pixelDolly3.render( pixelOpts )
          }, false )

    以上这个JS文件是马赛克模糊效果的具体实现。 下面是页面上调用的JS代码:

    var dolly1 = document.getElementById('dolly1')
          var dolly2 = document.getElementById('dolly2')
          var dolly3 = document.getElementById('dolly3')
          var pixelOpts = [ { resolution: 8 } ]
          var pixelDolly1 = dolly1.closePixelate( pixelOpts )
          var pixelDolly2 = dolly2.closePixelate( pixelOpts )
          var pixelDolly3 = dolly3.closePixelate( pixelOpts )
          var range = document.getElementById('range')
          var output = document.getElementById('output')
    
          range.addEventListener( 'change', function( event ) {
            var res = parseInt( event.target.value, 10 )
            res = Math.floor( res / 2 ) * 2
            res = Math.max( 4, Math.min( 100, res ) )
            output.textContent = res
            // console.log( res );
            pixelOpts = [ { resolution: res } ]
            pixelDolly1.render( pixelOpts )
            pixelDolly2.render( pixelOpts )
            pixelDolly3.render( pixelOpts )
          }, false )

    以上就是实现这款HTML5 Canvas图片马赛克模糊动画的全部过程。

    via:http://www.w2bc.com/Article/21456

  • 相关阅读:
    perl 模拟curl 发送json数据
    perl put 发送数据
    8小时浓度均值即连续8个小时浓度的平均值
    awk 字段匹配
    rsyslog imfile配置
    EasyUI datetimebox 的onchange事件的问题
    5大领先的商业智能解决方案,国产上榜!
    5大领先的商业智能解决方案,国产上榜!
    perl post 带中文名字的文件
    Openstack 实现技术分解 (2) 虚拟机初始化工具 — Cloud-Init & metadata & userdata
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4286087.html
Copyright © 2011-2022 走看看