Zeichnen Sie einen (fortschreitenden) Farbspritzer auf einer Leinwand

Question

Ich suche nach einer einfachen Methode, die es mir ermöglicht, in einem Canvas einen Farbspritzer wie diesen zu zeichnen:

Eine Methode könnte sein, viele kleine Partikel abzufeuern, die einen kleinen Kreis malen, aber ich möchte nicht viele Partikel-Objekte verwalten.

EDIT: Beispiel hier: jsfiddle.net/MK73j/4/

Eine zweite Methode wäre, einige Bilder zu haben und Maßstab und Rotation zu manipulieren, aber ich möchte eine gute Zufälligkeitseffekt haben.

Eine dritte Methode wäre, einige zufällige kleine Punkte zu setzen, sie mit Bezier-Kurven zu verbinden und den Inhalt zu füllen, aber ich würde nur eine einzelne Markierung haben.

Nun, ich weiß nicht, ob es eine bessere Methode gibt, um einen Effekt zu erzielen, der wie dieses Bild aussieht, oder ob ich eine der 3, an die ich gedacht habe, wählen muss.

Answer 1

Sie können Illusion verwenden, um einen schönen Splat-Effekt zu erzeugen.

Da Objekte sich "vergrößern", wenn sie sich nähern, können Sie eine zunehmende Größe plus eine leichte Bewegung animieren, um Ihren Splat-Effekt zu erstellen.

Sie können context.drawImage verwenden, um die Größenänderung zu handhaben:

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

Hier ist der Code und ein Fiddle: http://jsfiddle.net/m1erickson/r8Grf/

    body{ background-color: ivory; }
    canvas{border:1px solid red;}

    $(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("Wird geladen...");

        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() {
          // Zeichnungen
          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();
          }

          // neuer Frame anfordern
          requestAnimFrame(function() {
              animate();
          });
        }

    }); // Ende $(function(){});

    Splatzen!