在画布上绘制（渐进式）油漆飞溅答案

【问题标题】：Draw a (progressive) paint splash on a canvas在画布上绘制（渐进式）油漆飞溅
【发布时间】：2013-04-04 19:47:45
【问题描述】：

我正在寻找一种简单的方法，它可以让我在画布上绘制 paint splash 像这样：

一种方法是发射很多小粒子，这会画一个小圆圈，但我不想管理很多粒子对象。

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

第二种方法是使用少量图像并操纵缩放和旋转，但我希望效果具有良好的随机性。

第三种方法是制作一些随机的小点，用贝塞尔曲线连接它们并填充内容，但我只有一个标记。

嗯，我不知道是否有更好的方法来产生看起来像这张图片的效果，或者我是否必须从我想到的 3 个中进行选择。

【问题讨论】：

你想要那些花哨的 3d-ish 阴影边缘，还是绘制形状就足够了？
目前形状已经够用了，我编辑了我的帖子，如果你想看一下我做的例子

标签： javascript html canvas drawing html5-canvas

【解决方案1】：

您可以使用错觉来创建漂亮的飞溅效果。

由于对象在接近时会“增长”，因此您可以通过动画增加尺寸加上一点动作来创建喷溅效果。

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

【讨论】：

谢谢你的这个例子，它加入了我提出的第二个解决方案，但在我的例子中，它可能会播放很多飞溅，就像画家把它们扔在纸上一样（不知道你是否明白了吗）。也许我的例子会对你有所帮助：jsfiddle.net/MK73j/4 如你所见，这不是很好，因为我们看到粒子运动，或者我必须发射更多我不喜欢的粒子，因为性能原因。
刚刚遇到这个：blogs.msdn.com/b/ie/archive/2011/04/26/…
这太棒了。用一个像球体这样的预先破碎的物体开始它，然后在它碰到表面时立即将它交换到 splat 上呢？