绘制画布上（逐行扫描）油漆飞溅(Draw a (progressive) paint splash

我在寻找一个简单的方法，可我能在画布绘制油漆飞溅这样的：

一种方法将是火了很多小颗粒 ，这将画一个小圆圈的，但我不希望管理大量的颗粒物。

编辑： example here: jsfiddle.net/MK73j/4/

第二种方法将是有一些图片和操控缩放和旋转 ，但我想有效果的好随机的。

第三种方法将是使一些随机豆蔻点，与贝塞尔曲线加入他们的行列，并填写的内容，但我会只有一个标志。

好吧，我不知道是否有更好的方法有它看起来像这样图像的效果，或者如果我必须选择对3的我想过。

你可以用幻想来创造一个不错的图示效果。

由于对象“成长”，他们的做法，你可以动画的规模日益扩大再加上一点点的运动，以创建图示效果。

您可以使用context.drawImage处理调整大小：

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

这里是代码和一个小提琴： 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>