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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
js操作滚动条事件实例
Jan 29 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
详细分析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
西德产收音机
2021/03/01 无线电
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
python基础知识小结之集合
2015/11/25 Python
python Django框架实现自定义表单提交
2016/03/25 Python
机器学习python实战之决策树
2017/11/01 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
建筑实习自我鉴定
2013/10/18 职场文书
新闻记者个人求职的自我评价
2013/11/28 职场文书
个人作风剖析材料
2014/02/02 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
新郎新娘致辞
2015/07/31 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
辞职申请书范本
2019/05/20 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL