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 异常处理使用总结
Jun 21 Javascript
浅谈Javascript嵌套函数及闭包
Nov 09 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
字符串反转_JavaScript
Apr 28 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 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生成网页快照 不用COM不用扩展.
2010/02/11 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
JavaScript中的闭包原理分析
2010/03/08 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
网页中CDATA标记的说明
2010/09/12 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
记录Python脚本的运行日志的方法
2019/06/05 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
自定义django admin model表单提交的例子
2019/08/23 Python
python脚本定时发送邮件
2020/12/22 Python
中科软笔试题和面试题
2014/10/07 面试题
搞笑的爱情检讨书
2014/10/01 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python