JavaScript图像放大镜效果实现方法详解


Posted in Javascript onJune 28, 2020

1. 基本四瓣花型图案

根据四瓣花卉线的参数方程:

t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2);

x=t*cos(θ));

y=t*sin(θ));

编写如下的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, 320, 320);
			context.strokeStyle = "blue";
			context.lineWidth = 1;
			var dig = Math.PI / 64;
			context.beginPath();
			for (var i = 0; i <= 128; i++)
			{
				d = 120 * (1 + Math.sin(12 * i *
					dig) / 5);
				t = d * (0.5 + Math.sin(4 * i * dig) /
					2);
				x = (160 + t * Math.cos(i * dig));
				y = (160 + t * Math.sin(i * dig));
				if (i == 0)
					context.moveTo(x, y);
				else
					context.lineTo(x, y);
			}
			context.stroke();
		}
	</script>

</head>

<body onload="draw('myCanvas');">

	<canvas id="myCanvas" width="320" height="320"></canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件,可以看到在画布中绘制出如图1所示的四瓣花卉线图案。

JavaScript图像放大镜效果实现方法详解

图1 四瓣花卉线图案

2.平铺的100朵四瓣花

用一个二重循环将图1的四瓣花卉绘制10行10列共100朵。编写的HTML文件内容如下。

<!DOCTYPE html>

<head>

	<title>平铺的100朵四瓣花</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, 320, 320);
			context.strokeStyle = "blue";
			context.lineWidth = 1;
			var dig = Math.PI / 64;
			context.beginPath();
			for (px = 20; px < 320; px += 30)
				for (py = 20; py < 320; py += 30)
			{
				for (var i = 0; i <= 128; i++)
				{
					d = 20 * (1 + Math.sin(12 * i *
						dig) / 5);
					t = d * (0.5 + Math.sin(4 * i *
						dig) / 2);
					x = px + t * Math.cos(i * dig);
					y = py + t * Math.sin(i * dig);
					if (i == 0)
						context.moveTo(x, y);
					else
						context.lineTo(x, y);
				}
				context.stroke();
			}
		}
	</script>
</head>
<body onload="draw('myCanvas');">
	<canvas id="myCanvas" width="320" height="320"></canvas>
</body>
</html>

在浏览器中打开包含这段HTML代码的html文件,可以看到在画布中绘制出如图2所示的平铺的100朵四瓣花卉图案。

JavaScript图像放大镜效果实现方法详解

图2 平铺的100朵四瓣花卉图案

3.放大镜看平铺的四瓣花

将图2图形中位于中心点周围100以内的点的坐标进行球面镜反射变换,可以实现放大镜效果。编写的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, 320, 320);
			context.strokeStyle = "blue";
			context.lineWidth = 1;
			var dig = Math.PI / 64;
			context.beginPath();
			var r = 140;
			var x0 = 160;
			var y0 = 160;
			for (px = 20; px < 320; px += 30)
				for (py = 20; py < 320; py += 30)
			{
				for (var i = 0; i <= 128; i++)
				{
					d = 20 * (1 + Math.sin(12 * i *
						dig) / 5);
					t = d * (0.5 + Math.sin(4 * i *
						dig) / 2);
					x = px + t * Math.cos(i * dig);
					y = py + t * Math.sin(i * dig);
					l = Math.sqrt((x - x0) * (x - x0) +
						(y - y0) * (y - y0));
					if (l < r)
					{ // 圆心为(160,160),半径为140的圆内各点进行球面镜反射变换
						s = x - x0 < 0 ? -1 : 1;
						if (x - x0 == 0) x = x0 + 0.1;
						bt = 2 * Math.atan(l / r);
						th = Math.atan((y - y0) / (x - x0));
						m = r * Math.sin(bt);
						x = s * m * Math.cos(th) + x0;
						y = s * m * Math.sin(th) + y0;
					}
					if (i == 0)
						context.moveTo(x, y);
					else
						context.lineTo(x, y);
				}
				context.stroke();
			}
		}
	</script>

</head>

<body onload="draw('myCanvas');">

	<canvas id="myCanvas" width="320" height="320"></canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件,可以看到在画布中绘制出如图3所示的图形放大镜效果1。

JavaScript图像放大镜效果实现方法详解

图3 图形放大镜效果1

上面程序中语句var r=140;、var x0=160;和var y0=160;用于设置放大镜的圆心坐标和半径。若修改r=100,x0=100,y0=100,则在画布中绘制出如图4所示的图形放大镜效果2。

JavaScript图像放大镜效果实现方法详解

图4 图形放大镜效果2

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

Javascript 相关文章推荐
javascript定时保存表单数据的代码
Mar 17 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
angular实现商品筛选功能
Feb 01 Javascript
HTML的select控件美化
Mar 27 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
详细分析Node.js 模块系统
Jun 28 #Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 #Javascript
js瀑布流布局的实现
Jun 28 #Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 #Javascript
vue实现登录拦截
Jun 29 #Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 #Javascript
JavaScript多种图形实现代码实例
Jun 28 #Javascript
You might like
一段php加密解密的代码
2006/10/09 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
详解python中的index函数用法
2019/08/06 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
django下创建多个app并设置urls方法
2020/08/02 Python
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
关于运动会的口号
2014/06/07 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis
MySQL视图概念以及相关应用
2022/04/19 MySQL
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js