畫在畫布

我在尋找一個簡單的方法，可能夠我在畫布上繪製一個油漆飛濺這樣對一個（逐行掃描）油漆飛濺： paint splash 畫在畫布

一種方法將是發射很多小顆粒會畫一個小圓圈，但我不想管理很多顆粒物體。

編輯：example here:jsfiddle.net/MK73j/4/

第二種方法是有一些圖片和操縱縮放和旋轉，但我想有效果的好隨機的。

第三種方法是製作一些隨機litte點，加入他們與bezier曲線並填充內容，但我將只有一個標記。

那麼我不知道是否有更好的方法來產生看起來像這個圖像的效果，或者如果我不得不選擇我想過的3。

來源

2013-04-12 Razouille

你想那些花哨的3D十歲上下的陰影邊緣，或將圖紙形狀夠了嗎？ – Bergi

現在形狀已經足夠了，我編輯了我的帖子，並提供了一個例子，如果你想查看 – Razouille

您可以使用幻覺創建一個很好的啪啪效果。

由於對象在接近時會「增長」，因此您可以爲增加的大小加上一點動作來創建動畫效果。

您可以使用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>

來源

2013-04-12 15:25:03 markE

謝謝你的這個例子，它加入了我提出的第二個解決方案，但在我的例子中可能有很多飛濺它就像他們正在畫家的紙上扔（不知道你是否明白我的意思）。也許我的例子會幫助你：http://jsfiddle.net/MK73j/4/ 正如你可以看到它不是很好，因爲我們看到了粒子的運動，或者我必須發射更多我不喜歡的粒子的表現。 – Razouille

只是跑過這個：http://blogs.msdn.com/b/ie/archive/2011/04/26/understanding-differences-in-hardware-acceleration-through-paintball.aspx – markE

這真是太棒了。如何用一個像球體這樣的預先破碎的物體開始它，並在它碰到表面後立即將其交換到圖示上？ –

回答

相關問題