如何用JavaScript实现图像渐变插值效果？

本文共计2150个文字，预计阅读时间需要9分钟。

描述一个图形变化为另一个图形过程中的各个中间图形，称为渐变图形。可以利用插值算法求得各个渐变图形。设定在源图形和目标图形上各取M个对应点，并将这些点分别保存到数组中。

描述由一个图形变化为另一个图形过程中的各个中间图形，称为渐变图形。可以利用插值算法求得各个渐变图形。

设在源图形和目标图形上各取M个对应坐标点，并分别保存到数组中，源图形用数组SX[M]和SY[M]保存M个坐标点（sx，sy），目标图形用数组DX[M]和DY[M]保存M个坐标点（dx，dy）。若需生成源图形变换到目标图形中的N-1个渐变图形，采用简单的线性插值可以编写如下的二重循环：

for (k=1;k<N;k++) for (i=0;i<M;i++) { x=(dx[i]-sx[i])/N*k+sx[i]; y=(dy[i]-sy[i])/N*k+sy[i]; // 按求得的插值坐标点绘制渐变图形 }

1．六瓣花朵渐变为圆

六瓣花朵的笛卡尔坐标方程式设定为：

t=r1*(1+sin(18*θ)/5) *(0.5+Math.sin(6*θ)/2);

x=t*cos(θ);

y=t* sin(θ); （0≤θ≤2π）

圆的笛卡尔坐标方程式为：

x=r*cos(θ)

y=r*sin(θ) （0≤θ≤2π）

在六瓣花朵和圆上分别取128个点，然后利用简单的线性插值绘制中间24个渐变图形。编写如下的HTML代码。