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

时间：2021-05-26

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

设在源图形和目标图形上各取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代码。

<!DOCTYPE html><head> <title>六瓣花朵渐变为圆</title> <script type="text/javascript"> function draw(id) { var canvas = document.getElementById( id); if (canvas == null) return false; var context = canvas.getContext('2d'); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 200, 200); context.strokeStyle = "red"; context.lineWidth = 1; var dig = Math.PI / 64; var x1 = new Array(129); var y1 = new Array(129); var x2 = new Array(129); var y2 = new Array(129); for (var i = 0; i <= 128; i++) { d = 50 * (1 + Math.sin(18 * i * dig) / 5); t = d * (0.5 + Math.sin(6 * i * dig) / 2); x1[i] = t * Math.cos(i * dig); y1[i] = t * Math.sin(i * dig); x2[i] = 80 * Math.cos(i * dig); y2[i] = 80 * Math.sin(i * dig); } context.beginPath(); for (n = 0; n <= 25; n++) for (i = 0; i <= 128; i++) { x = (x2[i] - x1[i]) / 25 * n + x1[i] + 100; y = (y2[i] - y1[i]) / 25 * n + y1[i] + 100; if (i == 0) { context.moveTo(x, y); bx = x; by = y; } else context.lineTo(x, y); } context.lineTo(bx, by); context.closePath(); context.stroke(); } </script></head><body onload="draw('myCanvas');"> <canvas id="myCanvas" width="200" height="200"></canvas></body></html>

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

图1 六瓣花朵渐变为圆

2．圆渐变为花朵

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

<!DOCTYPE><html><head> <title>圆渐变为花朵</title></head><body> <canvas id="myCanvas" width="200" height="200" style="border:3px double #996633;"> </canvas> <script type="text/javascript"> var canvas = document.getElementById( 'myCanvas'); var context = canvas.getContext('2d'); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 200, 200); context.fillStyle = "red"; var dig = Math.PI / 64; var x1 = new Array(129); var y1 = new Array(129); var x2 = new Array(129); var y2 = new Array(129); var n = 0; for (var i = 0; i <= 128; i++) { d = 50 * (1 + Math.sin(18 * i * dig) / 5); t = d * (0.5 + Math.sin(6 * i * dig) / 2); x1[i] = t * Math.cos(i * dig); y1[i] = t * Math.sin(i * dig); x2[i] = 80 * Math.cos(i * dig); y2[i] = 80 * Math.sin(i * dig); } function draw() { context.clearRect(0, 0, 200, 200); context.beginPath(); for (i = 0; i <= 128; i++) { x = (x1[i] - x2[i]) / 25 * n + x2[i] + 100; y = (y1[i] - y2[i]) / 25 * n + y2[i] + 100; if (i == 0) { context.moveTo(x, y); bx = x; by = y; } else context.lineTo(x, y); } context.lineTo(bx, by); context.stroke(); n = n + 1; if (n > 25) n = 0; context.fill(); } window.setInterval('draw()', 300); </script></body></html>

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

图2 从圆渐变为六瓣花朵

3．六瓣花朵渐变为正方形

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

<!DOCTYPE html><head> <title>六瓣花朵渐变为正方形</title> <script type="text/javascript"> function draw(id) { var canvas = document.getElementById( id); if (canvas == null) return false; var context = canvas.getContext('2d'); context.fillStyle = "#EEEEDD"; context.fillRect(0, 0, 300, 300); context.strokeStyle = "red"; context.lineWidth = 1; var dig = Math.PI / 60; var x1 = new Array(120); var y1 = new Array(120); var x2 = new Array(120); var y2 = new Array(120); // 生成花瓣基本数据，坐标保存在（x1[i]，y1[i]）中 var petalNum = 6; // 花瓣数 for (var i = 0; i < 120; i++) { d = 50 * (1 + Math.sin(petalNum * ( i * dig + Math.PI / 4))); x1[i] = d * Math.cos(i * dig + Math .PI / 4); y1[i] = -d * Math.sin(i * dig + Math.PI / 4); } // 生成多边形基本数据，坐标保存在（x2[i]，y2[i]）中 var r = 150; var sideNum = 4; // 正多边形边数 var k = 120 / sideNum; dig = Math.PI / sideNum; var dd = 2 * r * Math.sin(dig) / k; for (i = 0; i < sideNum; i++) { aa = 2 * i * dig + 3 * Math.PI / 4; x0 = r * Math.sin(aa); y0 = r * Math.cos(aa); for (j = 0; j < k; j++) { x2[i * k + j] = x0 + j * dd * Math .sin(aa + Math.PI / 2 + Math.PI / sideNum); y2[i * k + j] = y0 + j * dd * Math .cos(aa + Math.PI / 2 + Math.PI / sideNum); } } context.beginPath(); // 按对数规律进行图案渐变 for (n = 0; n <= 25; n++) { for (i = 0; i < 120; i++) { x = (x2[i] - x1[i]) / Math.log(25) * Math.log(n) + x1[i] + 150; y = (y2[i] - y1[i]) / Math.log(25) * Math.log(n) + y1[i] + 150; if (i == 0) { context.moveTo(x, y); bx = x; by = y; } else context.lineTo(x, y); } context.lineTo(bx, by); } context.closePath(); context.stroke(); } </script></head><body onload="draw('myCanvas');"> <canvas id="myCanvas" width="320" height="320"></canvas></body></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文件内容如下。

<!DOCTYPE><html><head> <title>正五边形渐变为五瓣花朵</title></head><body> <canvas id="myCanvas" width="300" height="300" style="border:3px double #996633;"></canvas> <script type="text/javascript"> var canvas = document.getElementById( 'myCanvas'); var context = canvas.getContext('2d'); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 300, 300); context.fillStyle = "red"; var dig = Math.PI / 60; var x1 = new Array(120); var y1 = new Array(120); var x2 = new Array(120); var y2 = new Array(120); // 生成花瓣基本数据，坐标保存在（x1[i]，y1[i]）中 var petalNum = 5; for (var i = 0; i < 120; i++) { d = 50 * (1 + Math.sin(petalNum * (i * dig + Math.PI / 4))); x1[i] = d * Math.cos(i * dig + Math.PI / 4); y1[i] = -d * Math.sin(i * dig + Math .PI / 4); } // 生成多边形基本数据，坐标保存在（x2[i]，y2[i]）中 var r = 150; var sideNum = 5; var k = 120 / sideNum; dig = Math.PI / sideNum; var dd = 2 * r * Math.sin(dig) / k; for (i = 0; i < sideNum; i++) { aa = 2 * i * dig + 3 * Math.PI / 4; x0 = r * Math.sin(aa); y0 = r * Math.cos(aa); for (j = 0; j < k; j++) { x2[i * k + j] = x0 + j * dd * Math.sin( aa + Math.PI / 2 + Math.PI / sideNum); y2[i * k + j] = y0 + j * dd * Math.cos( aa + Math.PI / 2 + Math.PI / sideNum); } } var n = 0; function draw() { context.clearRect(0, 0, 300, 300); context.beginPath(); for (i = 0; i < 120; i++) { x = (x1[i] - x2[i]) / Math.log(25) * Math.log(n) + x2[i] + 150; y = (y1[i] - y2[i]) / Math.log(25) * Math.log(n) + y2[i] + 150; if (i == 0) { context.moveTo(x, y); bx = x; by = y; } else context.lineTo(x, y); } context.lineTo(bx, by); context.closePath(); context.stroke(); n = n + 1; if (n > 25) n = 0; context.fill(); } window.setInterval('draw()', 400); </script></body></html>

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

图5 正五边形渐变为五瓣花朵

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章