2D坐标系中绘制旋转的椭圆-坐标变换
2D坐标系中绘制旋转的椭圆-坐标变换
绘制旋转的椭圆
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>椭圆</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script>
function ParamEllipse(context, x, y, a, b,theta=0){
//max是等于1除以长轴值a和b中的较大者
//i每次循环增加1/max，表示度数的增加
//这样可以使得每次循环所绘制的路径（弧线）接近1像素
var step = (a > b) ? 1 / a : 1 / b;
context.beginPath();
context.moveTo(x + a, y); //从椭圆的左端点开始绘制
for (var i = 0; i < 2 * Math.PI; i += step){
//参数方程为x = a * cos(i), y = b * sin(i)，
//参数为i，表示度数（弧度）
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
}
context.closePath();
context.stroke();
};
var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 600;
var context = canvas.getContext("2d");
context.lineWidth = 1;
context.strokeStyle="black";
var a=100,b=60,xc=130,yc=80;
ParamEllipse(context, xc, yc, a, b); //椭圆
ParamEllipse(context, xc, yc, a+3, b+3); //椭圆
ParamEllipse(context, xc, yc, a+6, b+6); //椭圆
for (var i = 0,x,y,alpha=Math.PI/3; i < 2 * Math.PI; i += Math.PI/10){
x= (a+3) * Math.cos(i);
y= (b+3) * Math.sin(i);
context.beginPath();
context.arc(xc + x, yc + y, 3, 0, 2 * Math.PI);
context.closePath();
context.stroke();
}
for (var i = 0,x,y,xn,yn,alpha=Math.PI/6; i <Math.PI/0.5; i += Math.PI/20){
x= (a+3) * Math.cos(i);
y= (b+3) * Math.sin(i);
xn=x*Math.cos(alpha)+y*Math.sin(alpha);
yn=-x*Math.sin(alpha)+y*Math.cos(alpha);
context.beginPath();
context.arc(xc + xn, 360-(yc+yn), 3, 0, 2 * Math.PI);
context.closePath();
context.stroke();
}
</script>
</body>
</html>运行结果如下：
坐标变换参考了下文：
https://www.cnblogs.com/zhoug2020/p/7864898.html
而您一旦用以下这图解方法，随时眼见显然，再也不会搞错。
平时开发程序，免不了要对图像做各种变换处理。有的时候变换可能比较复杂，比如平移之后又旋转，旋转之后又平移，又缩放。
直接用公式计算，不但复杂，而且效率低下。这时可以借助变换矩阵和矩阵乘法，将多个变换合成一个。 最后只要用一个矩阵对每个点做一次处理就可以得到想要的结果。
另外，矩阵乘法一般有硬件支持，比如3D 图形加速卡，处理3D变换中的大量矩阵运算，比普通CPU 要快上1000倍。
下面是3类基本的2D图形变换。
平移：
设某点向x方向移动 dx, y方向移动 dy ,[x,y]为变换前坐标， [X,Y]为变换后坐标。
则 X = x+dx; Y = y+dy;
以矩阵表示：
1 0 0
[X, Y, 1] = [x, y, 1][ 0 1 0 ] ;
dx dy 1
1 0 0
0 1 0 即平移变换矩阵。
dx dy 1
旋转：
旋转相比平移稍稍复杂：
设某点与原点连线和X轴夹角为b度，以原点为圆心，逆时针转过a度 , 原点与该点连线长度为R, [x,y]为变换前坐标， [X,Y]为变换后坐标。
x = Rcos(b) ; y = Rsin(b);
X = Rcos(a+b) = Rcosacosb - Rsinasinb = xcosa - ysina; (合角公式)
Y = Rsin(a+b) = Rsinacosb + Rcosasinb = xsina + ycosa ;
用矩阵表示：
cosa sina 0
[X, Y, 1] = [x, y, 1][-sina cosa 0 ]
0 0 1
cosa sina 0
-sina cosa 0 为旋转变换矩阵。
0 0 1
缩放
设某点坐标，在x轴方向扩大 sx倍，y轴方向扩大 sy倍，[x,y]为变换前坐标， [X,Y]为变换后坐标。
X = sx*x; Y = sy*y;
则用矩阵表示：
sx 0 0
[X, Y, 1] = [x, y, 1][ 0 sy 0 ] ;
0 0 1
sx 0 0
0 sy 0 即为缩放矩阵。
0 0 1
2D基本的模型视图变换，就只有上面这3种，所有的复杂2D模型视图变换，都可以分解成上述3个。
比如某个变换，先经过平移，对应平移矩阵A， 再旋转, 对应旋转矩阵B，再经过缩放，对应缩放矩阵C.
则最终变换矩阵 T = ABC. 即3个矩阵按变换先后顺序依次相乘(矩阵乘法不满足交换律，因此先后顺序一定要讲究)。
先不说了，广告时间又到了，现在植入广告：几个《传热学》相关的小程序总结如下，可在微信中点击体验：
- 有限元三角单元网格自动剖分
- Delaunay三角化初体验 （理论戳这）
- Contour等值线绘制 （理论戳这）
- 2D非稳态温度场有限元分析
- 1D稳态导热温度场求解 （源码戳这)
- 1D非稳态导热温度场求解程序 （源码戳这)
- 2D稳态导热温度场求解 （源码戳这)
- 普朗克黑体单色辐射力
《传热学》相关小程序演示动画如下（其中下图1D非稳态导热计算发散，调小时间步长后重新计算，结果收敛！）：
黑体单色辐射力如下图，可见温度越高，同频率辐射力越大：
《(计算)流体力学》中的几个小程序，可在微信中点击体验：
- Blasius偏微分方程求解速度边界层 （理论这里）
- 理想流体在管道中的有势流动 （源码戳这）
- 涡量-流函数法求解顶驱方腔流动 （源码戳这）
- SIMPLE算法求解顶驱方腔流动 （源码戳这）
- Lattice Boltzmann Method计算绕流演示（参考源码）
- 流体力学实验在线演示进行演示
关于《(计算)流体力学》相关的几个小程序演示动画如下：
LBM(=Lattice Boltzmann Method)计算得到的圆柱绕流“卡门涡街”演示（由于网格较少，分辨率低，圆柱近乎正方形）：
顺便，《(热工过程)自动控制》中关于PID控制器的仿真可点击此处体验：PID控制演示小程序，（PID控制相关视频见：基础/整定/重要补充）。动画如下：
（正文完！）
现将往期内容制成目录，内容如下：