Zeichnen Sie eine (progressive) Farbe spritzen auf einer Leinwand

Ich bin für eine einfache Methode suchen, die mich in eine Leinwand ein Farbe spritzen wie diese auf zeichnen können: wird sein paint splash Zeichnen Sie eine (progressive) Farbe spritzen auf einer Leinwand

Eine Methode feuern viele kleine Teilchen, die einen kleinen Kreis malen werden, aber ich möchte nicht viele Partikelobjekte verwalten.

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

Ein zweites Verfahren wird einige Bilder haben und zu manipulieren Skalierung und Rotation, aber ich möchte auf die Wirkung eine gute zufällig haben.

Eine dritte Methode wird sein, einige zufällige kleine Punkte zu machen, sie mit Bezierkurven zu verbinden und den Inhalt zu füllen, aber ich werde nur eine einzelne Markierung haben.

Nun, ich weiß nicht, ob es eine bessere Methode gibt, einen Effekt zu haben, der wie dieses Bild aussieht oder wenn ich eines der 3 auswählen muss, über die ich nachdachte.

Quelle

2013-04-12 Razouille

Haben Sie jene Phantasie 3D-ish beschattet Kanten wollen, oder würde Zeichnung die Form ist genug? – Bergi

Die Form ist im Moment genug, ich habe meinen Beitrag mit einem Beispiel bearbeitet, das ich gemacht habe, wenn Sie einen Blick darauf werfen wollen – Razouille

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

Da Objekte "wachsen", wenn sie sich nähern, können Sie eine zunehmende Größe plus ein wenig Bewegung animieren, um Ihren Splat-Effekt zu erzeugen.

Sie können context.drawImage verwenden, um die Größe neu bestimmen zu handhaben:

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

Hier Code und ein Fiddle: 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>

Quelle

2013-04-12 15:25:03 markE

Danke für dieses Beispiel, es verbindet die zweite Lösung, die ich vorgeschlagen habe, aber in meinem Beispiel könnte es viele Spritzer sein spielt, als ob sie auf ein Papier von einem Maler geworfen werden (weiß nicht, wenn Sie sehen, was ich meine). Vielleicht wird mein Beispiel Ihnen helfen: http://jsfiddle.net/MK73j/4/ Wie Sie sehen können, ist es nicht sehr gut, weil wir die Partikelbewegung sehen, oder ich muss mehr Partikel feuern, die ich nicht mag verursachen der Leistung. – Razouille

Gerade lief über diese: http://blogs.msdn.com/b/ie/archive/2011/04/26/understanding-differences-in-hardware-acceleration-through-paintball.aspx – markE

Das ist ziemlich genial. Wie wäre es mit einem vorgebrochenen Objekt wie einer Kugel anzufangen und es gegen den Splat auszutauschen, sobald es auf die Oberfläche trifft? –

Zeichnen Sie eine (progressive) Farbe spritzen auf einer Leinwand

Antwort

Verwandte Themen