HTML5實驗：JavaScript模擬流體效果

第1頁繪制橢圓

把現實世界當中的物體模擬到計算機當中，一些簡單的物理實驗、碰撞旋轉等等難度還是不算很大，難度較大的應當算流體模擬。

本文將在Canvas當中模擬出一個2D平面內的水珠，涉及的知識點和技巧包括：Jscex基礎知識，貝塞爾曲線的繪制，合理利用CanvasRenderingContext2D的translate和rotate等API。

繪制橢圓

在模擬水滴之前，我們先思考一下怎麼在canvas當中繪制一個橢圓。

大家可以很容易想到 下面幾種方案：

1.根據橢圓笛卡爾坐標系方程繪制

2.根據橢圓極坐標方程繪制

3.根據橢圓曲率變化繪制

4.利用四條貝塞爾曲線繪制

第四種，也是性能最好的一種，這樣可以避免復雜的計算，充分利用CanvasRenderingContext2D的API(API的性能是通過嚴格測試，一般情況下比較靠譜).

所以我們采用第四種方式來繪制橢圓。

var canvas;

var ctx;

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);