首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJune 28, 2020

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

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

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

图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所示。

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

图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所示。

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

图3 从六瓣花朵渐变为正方形

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

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

图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所示。

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

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

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

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

- Author -

aTeacher

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
baidu博客的编辑友情链接的新的层窗口！经典～支持【FF】
Feb 09 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
vue实现登录拦截
Jun 29 #Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 #Javascript
JavaScript多种图形实现代码实例
Jun 28 #Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 #Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 #Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 #Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 #Javascript
iOS16(1) Athens(1) iPhone(1) iOS(1) opencv(7) compose(3) iOS15(1) DNA(2) moviepy(1) 模糊匹配(1)
You might like
php一些错误处理的方法与技巧总结
2013/08/10 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
php框架知识点的整理和补充
2021/03/01 PHP
点击进行复制的JS代码实例
2013/08/23 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
python使用mysql数据库示例代码
2017/05/21 Python
Python3 socket同步通信简单示例
2017/06/07 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
会计实习生自我鉴定
2013/12/12 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
项目考察欢迎辞
2014/01/17 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
优秀团员自我评价
2015/03/10 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android