基于HTML5 Canvas生成粒子效果的人物头像

2021-07-22 02:45:56

前面我们分享过一个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

码农公寓

相关文章