第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);
ctx.bezierCurveTo(xm – ox, ye, x, ym + oy, x, ym);
ctx.stroke();
ctx.clearRect(0,0,canvas.width,canvas.border=”1″ Height);
drawEllipse(10, 10, 40, 82);
【HTML5实验：JavaScript模拟流体效果】相关文章：
★ 使用HTML5 Canvas 制作水波纹效果点击图片就会触发
- 【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案，安徽省
- 第五单元 民族艺术的瑰宝_15. 多姿多彩的民族服饰_第二课时(市一等奖)(岭南版六年级上册)_T129830
- 苏科版数学八年级下册9.2《中心对称和中心对称图形》
- 外研版八年级英语下学期 Module3
- 第19课 我喜欢的鸟_第一课时(二等奖)(人美杨永善版二年级下册)_T644386
- 外研版英语三起6年级下册（14版）Module3 Unit2
- 【部编】人教版语文七年级下册《老山界》优质课教学视频+PPT课件+教案，安徽省
- 冀教版英语四年级下册第二课
- 【部编】人教版语文七年级下册《老山界》优质课教学视频+PPT课件+教案，安徽省
- 二次函数求实际问题中的最值_第一课时(特等奖)(冀教版九年级下册)_T144339