JavaScript如何使用插值实现图像渐变

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

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

   for (k=1;k

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代码。



	
	


	



将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出从六瓣花朵渐变为圆的图案，如图1所示。

图1 六瓣花朵渐变为圆
2．圆渐变为花朵
我们将图1图形中的圆渐变为六瓣花朵的过程动态展示出来。编写的HTML文件内容如下。




	




	

	

	





将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以在画布中看到从圆渐变为六瓣花朵的动画过程，如图2所示。

图2 从圆渐变为六瓣花朵
3．六瓣花朵渐变为正方形
仿照上面的思路，设计程序将六瓣花朵渐变为正方形，且渐变计算时采用对数函数。编写如下的HTML代码。





	

	





	





将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出从六瓣花朵渐变为正方形的图案，如图3所示。

图3 从六瓣花朵渐变为正方形
将绘制图3的HTML程序中的花瓣数设置为5，正多边形边数也设置为5，即修改语句“var petalNum=6;”为“var petalNum=5;”，修改语句“var sideNum=4;”为“var sideNum=5;”，则在画布中绘制出如图4所示的从五瓣花朵渐变为正五边形的图案。

图4 从五瓣花朵渐变为正五边形
4．正五边形渐变为五瓣花朵
我们将图4图形中的正五边形渐变为五瓣花朵的过程动态展示出来。编写的HTML文件内容如下。




	


	

	





将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以在画布中看到从正五边形渐变为五瓣花朵的动画过程，如图5所示。

图5 正五边形渐变为五瓣花朵
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。