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 面向对象全新理练之数据的封装
Dec 03 Javascript
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
python读取xlsx的方法
2018/12/25 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
python科学计算之narray对象用法
2019/11/25 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
python interpolate插值实例
2020/07/06 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
转让协议书范本
2014/09/13 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
物业保洁员管理制度
2015/08/05 职场文书