HTML5实验：JavaScript模拟流体效果

最新推荐文章于 2022-11-08 14:14:15 发布

吖Q

最新推荐文章于 2022-11-08 14:14:15 发布

阅读量554

点赞数

把现实世界当中的物体模拟到计算机当中，一些简单的物理实验、碰撞旋转等等难度还是不算很大，难度较大的应当算流体模拟。

　　本文将在Canvas当中模拟出一个2D平面内的水珠，涉及的知识点和技巧包括：Jscex基础知识，贝塞尔曲线的绘制，合理利用CanvasRenderingContext2D的translate和rotate等API。

　　绘制椭圆

　　在模拟水滴之前，我们先思考一下怎么在canvas当中绘制一个椭圆。

　　大家可以很容易想到下面几种方案：

　　1.根据椭圆笛卡尔坐标系方程绘制

　　2.根据椭圆极坐标方程绘制

　　3.根据椭圆曲率变化绘制

　　4.利用四条贝塞尔曲线绘制

　　第四中，也是性能最好的一种，这样可以避免复杂的计算，充分利用CanvasRenderingContext2D的API(API的性能是通过严格测试，一般情况下比较靠谱).

　　所以我们采用第四种方式来绘制椭圆。

var canvas;
         var ctx;
         canvas = document.getElementById( " myCanvas1 ");
         ctx = canvas.getContext( " 2d ");
         ctx.strokeStyle = " #fff ";
         function drawEllipse(x, y, w, h) {
             var k = 0.5522848;
             var ox = (w / 2) * k;
             var oy = (h / 2) * k;
             var xe = x + w;
             var ye = y + h;
             var xm = x + w / 2;
             var ym = y + h / 2;
             ctx.beginPath();
             ctx.moveTo(x, ym);
             ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
             ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
             ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
             ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
             ctx.stroke();
         }
         ctx.clearRect( 0, 0,canvas.width,canvas.height);
         drawEllipse( 10, 10, 40, 82);

　　(改变drawEllipse的四个参数试试)

　　旋转椭圆

　　这里的旋转不是绕上面的drawEllipse的前两个参数x,y旋转，二是绕椭圆的中心旋转。所以仅仅CanvasRenderingContext2D.rotate是不够的，因为CanvasRenderingContext2D.rotate是绕画布的左上角(0，0)旋转。所以我们先要把(0，0)通过CanvasRenderingContext2D.translate到椭圆的中心，然后再drawEllipse(-a/2, –b/2, a, b).

　　上面这句话，就是绕中心旋转的核心。这里还可以推广到任意图形或者图片(假设有约定的中心)。如图：

　　然后我们就可以先绘制一个鸟巢出来：

<html>
<head>
     <script src= " http://files.cnblogs.com/iamzhanglei/jscex.jscexRequire.min.js " type= " text/javascript "></script>
</head>
<body>

<style type= " text/css ">

    input.css3btn

    {

        background: -moz-linear-gradient(270deg, #d2ebf8, #0c8ab5);

        background: -webkit-linear-gradient(top, #d2ebf8, #0c8ab5);

        background: -o-linear-gradient(top, #d2ebf8, #0c8ab5);

         filter: progid:DXImageTransform.Microsoft.Gradient(GradientType= 0, StartColorStr= ' #000099CC', EndColorStr='#FF0087B4');

        border-top: 1px solid #38538c;

        border- right: 1px solid #1f2d4d;

        border-bottom: 1px solid # 151e33;

        border- left: 1px solid #1f2d4d;

        border-radius: 4px;

        box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 2px 0px #1f3053, 0 4px 4px 1px # 111111;

        color: #f0f0f0;

        font: bold 20px " helvetica neue " , helvetica, arial, sans-serif;

        padding: 10px 0 10px 0;

        text-align: center;

        text-shadow: 0px -1px 1px #1e2d4d;

        width: 150px;

        background-clip: padding-box;

    }

    input.css3btn:hover

    {

        box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 3px 0px #1f3053, 0 4px 4px 1px # 111111;

        cursor: pointer;

    }

    input.css3btn:active

    {

        box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 # 111111;

        margin-top: 1px;

    }

</style>
     <canvas id= " myCanvas2 " width= " 350 " height= " 350 " style= " border: solid 15px #222; background-color: #111;

        color: #CCC; " >
Your browser does not support the canvas element.
</canvas>
     <script>

        var canvas;

        var ctx;

        var px = 0;

        var py = 0;

         function init() {

            canvas = document.getElementById( " myCanvas2 ");

            ctx = canvas.getContext( " 2d ");

            ctx.strokeStyle = " #fff ";

            ctx.translate( 70, 70);

        }

        init();

        var i = 0;

         function drawEllipse(x, y, w, h) {

            var k = 0.5522848;

            var ox = (w / 2) * k;

            var oy = (h / 2) * k;

            var xe = x + w;

            var ye = y + h;

            var xm = x + w / 2;

            var ym = y + h / 2;

            ctx.beginPath();

            ctx.moveTo(x, ym);

            ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);

            ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);

            ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);

            ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);

            ctx.stroke();

            ctx.translate(x + 70, y + 100);

            px = - 70;

            py = - 100;

            ctx.rotate( 10 * Math.PI * 2 / 360);

        }

        var ct;

        var drawAsync = eval(Jscex.compile( " async ", function (ct) {

             while ( true) {

                drawEllipse(px, py, 140, 200)

                $await(Jscex.Async.sleep( 200, ct));

            }

        }))

         function Button1_onclick() {

            ct.cancel();

        }

         function Button2_onclick() {

            ct = new Jscex.Async.CancellationToken();

            drawAsync(ct).start();

        }

    </script>
     <br />
     <input id= " Button2 " class= " css3btn " type= " button " value= " run " οnclick= " return Button2_onclick() " />
     <input id= " Button1 " class= " css3btn " type= " button " value= " stop " οnclick= " return Button1_onclick() " />
</body>
</html>

HTML5实验：JavaScript模拟流体效果

　　绘制水滴

　　旋转的椭圆和鸟巢神马的和水滴有什么关系呢?

　　我们通过改变椭圆的长轴和短轴，令其非常接近圆形(只能接近，不能等于圆形)，然后每次旋转擦除画布，就可以达你预想不到的效果!

　　这里需要注意的是，擦除画布不再是一句CanvasRenderingContext2D.clearRect(0,0,canvas.width,canvas.height)就可以，因为画布已经旋转和画布原点已经translate，所以我们使用 ctx.clearRect(-canvas.width, -canvas.height, 2 * canvas.width, 2 * canvas.height)来擦除画布。

　　我们画一个长轴42，短轴40的椭圆，旋转并擦除画布：