A character avatar that generates particle effects based on HTML5 canvas

Before we shared a HTML5 canvas implementation of the image mosaic blur effect, HTML5 processing the picture is really very simple. Today we are going to use HTML5 canvas to achieve a particle effect of the avatar, you can choose an avatar image, then the image will be broken into many particles, and then slowly reorganized into a picture, the mouse over the picture when the particles will also appear floating animation effects, looks very cool.

Online preview Source Download

The HTML code is as follows

<Pclass= "Center">Change pixel resolution<inputtype= "Range"min= "4"Max= "+"value= "+"ID= "Range" /> <spanID= "Output">32</span></P><Divclass= "thumb">         <imgsrc= "Img/1.jpg"ID= "Dolly1" />        <imgsrc= "Img/2.jpg"ID= "Dolly2" />        <imgsrc= "Img/3.jpg"ID= "Dolly3" /></Div>

Defines a slider and 3 images to blur. The JavaScript code is as follows

varDolly1 = document.getElementById (' dolly1 '))      varDolly2 = document.getElementById (' dolly2 '))      varDolly3 = document.getElementById (' Dolly3 '))      varPixelopts = [{Resolution:8 } ]      varPixelDolly1 =dolly1.closepixelate (pixelopts)varPixelDolly2 =dolly2.closepixelate (pixelopts)varPixelDolly3 =dolly3.closepixelate (pixelopts)varRange = document.getElementById (' Range ')      varOutput = document.getElementById (' Output ') Range.addeventlistener (' Change ',function(event) {varres = parseint (Event.target.value, 10) Res= Math.floor (RES/2) * 2Res= Math.max (4, Math.min (100, RES)) Output.textcontent=Res//Console.log (res);Pixelopts =[{resolution:res}] Pixeldolly1.render (pixelopts) pixeldolly2.render (pixelopts) Pixeldol Ly3.render (pixelopts)},false)

The above JS file is the concrete implementation of mosaic blur effect. Here is the JS code called on the page:

varDolly1 = document.getElementById (' dolly1 '))      varDolly2 = document.getElementById (' dolly2 '))      varDolly3 = document.getElementById (' Dolly3 '))      varPixelopts = [{Resolution:8 } ]      varPixelDolly1 =dolly1.closepixelate (pixelopts)varPixelDolly2 =dolly2.closepixelate (pixelopts)varPixelDolly3 =dolly3.closepixelate (pixelopts)varRange = document.getElementById (' Range ')      varOutput = document.getElementById (' Output ') Range.addeventlistener (' Change ',function(event) {varres = parseint (Event.target.value, 10) Res= Math.floor (RES/2) * 2Res= Math.max (4, Math.min (100, RES)) Output.textcontent=Res//Console.log (res);Pixelopts =[{resolution:res}] Pixeldolly1.render (pixelopts) pixeldolly2.render (pixelopts) Pixeldol Ly3.render (pixelopts)},false)

The above is the whole process of realizing this HTML5 canvas mosaic blur animation.

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

A character avatar that generates particle effects based on HTML5 canvas