JavaScript圖像放大鏡效果實(shí)現(xiàn)方法詳解

更新時間：2020年06月28日 09:58:48 作者：aTeacher

這篇文章主要介紹了JavaScript圖像放大鏡效果實(shí)現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

1. 基本四瓣花型圖案

根據(jù)四瓣花卉線的參數(shù)方程：

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所示的四瓣花卉線圖案。

圖1 四瓣花卉線圖案

2．平鋪的100朵四瓣花

用一個二重循環(huán)將圖1的四瓣花卉繪制10行10列共100朵。編寫的HTML文件內(nèi)容如下。

<!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朵四瓣花卉圖案。

圖2 平鋪的100朵四瓣花卉圖案

3．放大鏡看平鋪的四瓣花

將圖2圖形中位于中心點(diǎn)周圍100以內(nèi)的點(diǎn)的坐標(biāo)進(jìn)行球面鏡反射變換，可以實(shí)現(xiàn)放大鏡效果。編寫的HTML文件內(nèi)容如下。

<!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的圓內(nèi)各點(diǎn)進(jìn)行球面鏡反射變換
						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。