Geek Answers Handbook

Draw a (progressive) splash of paint on canvas

I am looking for a simple method that allows me to paint a paint splash on canvas like this: paint splash

One method will launch many small particles that will draw a small circle, but I do not want to control many particle objects.

EDIT : example here: jsfiddle.net/MK73j/4/

The second way is to have multiple images and manipulate the scaling and rotation , but I want to have a nice random effect.

The third method is to make some random litte points, connect them to the bezel-less curves and fill in the content, but I will only have one label.

Well, I don’t know if there is a better way to get an effect similar to this image, or if I need to choose from 3 that I was thinking about.

+8
javascript html5 html5-canvas canvas drawing
source share
1 answer

You can use the illusion to create a nice splat effect.

As objects “grow” as they get closer, you can animate the increasing size plus a little movement to create a splat effect.

You can use context.drawImage to handle resizing:

 context.drawImage(splashImg, 0 ,0, splashImg.width, splashImg.height, newX, newY, newWidth, newHeight);

Here is the code and script: http://jsfiddle.net/m1erickson/r8Grf/

 <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; } canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); $("go").html("Loading..."); var count=80; var win=new Image(); var splash; win.onload=function(){ splash=new Image(); splash.onload=function(){ ctx.drawImage(win,0,0); } splash.src="http://dl.dropbox.com/u/139992952/splash2.svg"; } win.src="http://dl.dropbox.com/u/139992952/window.png"; $("#go").click(function(){ count=80; animate(); }); function animate() { // drawings if(--count>1){ ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.drawImage(win,0,0); ctx.globalCompositeOperation = 'destination-over'; ctx.drawImage(splash,0,0,splash.width,splash.height,25,25,splash.width/count,splash.height/count); ctx.restore(); } // request new frame requestAnimFrame(function() { animate(); }); } }); // end $(function(){}); </script> </head> <body> <br/><button id="go">Splash!</button><br/><br/> <canvas id="canvas" width=326 height=237></canvas> </body> </html>
+3
source share

More articles:


All Articles