HTML5实验：JavaScript模拟流体效果.pdf

文档介绍：HTML5实验:JavaScript模拟流体效果
2013-01-04 09:03 95人阅读评论(0) 收藏举报
     把现实世界当中的物体模拟到计算机当中,一些简单的物理实验、碰撞旋转等等难度还是不算很大,难度
较大的应当算流体模拟。
本文将在Canvas当中模拟出一个2D平面内的水珠,涉及的知识点和技巧包括:Jscex基础知识,贝塞尔曲线的绘制,
合理利用CanvasRenderingContext2D的translate和rotate等API。
绘制椭圆
在模拟水滴之前,我们先思考一下怎么在canvas当中绘制一个椭圆。
大家可以很容易想到下面几种方案:




第四中,也是性能最好的一种,这样可以避免复杂的计算,充分利用CanvasRenderingContext2D的API(API的性能是
通过严格测试,一般情况下比较靠谱).
所以我们采用第四种方式来绘制椭圆。
var canvas;
         var ctx;
         canvas = ("myCanvas1");
         ctx = ("2d");
         = "#fff";
         function drawEllipse(x, y, w, h) {
             var k = ;
             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;
             ();
             (x, ym);
             (x, ym - oy, xm - ox, y, xm, y);
             (xm + ox, y, xe, ym - oy, xe, ym);
             (xe, ym + oy, xm + ox, ye, xm, ye);
             (xm - ox, ye, x, ym + oy, x, ym);
             ();
         }
         (0,0,,);
         drawEllipse(10, 10, 40, 82);
(改变drawEllipse的四个参数试试)
旋转