首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript图片旋转效果实现方法详解

Posted in Javascript onJune 28, 2020

在Canvas API中，上下文CanvasRenderingContext2D对象提供了一个与坐标旋转相关的方法：

void rotate(in float angle); // 按给定的弧度顺时针旋转angle

rotate（）方法旋转的中心始终是canvas的原点。如果要改变旋转中心，需要使用translate方法。

我们可以将绘制的图形每隔一定的时间间隔后，旋转一定的角度重新绘制一次，这样就可以得到旋转的动画效果。

1．旋转的扇叶

将一个梯形按顺时针旋转90°的方式绘制4次，可以绘制出一个扇叶图案。将绘制的扇叶图案每隔0.1秒后顺时针旋转12°，重新绘制一遍，得到旋转的扇叶动画。

编写如下的HTML代码。

<!DOCTYPE html>

<head>

	<title>旋转的扇叶</title>

	<script type="text/javascript">
		var context;
		var i;

		function draw(id)
		{
			var canvas = document.getElementById(
				id);
			if (canvas == null)
				return false;
			context = canvas.getContext('2d');
			i = 3;
			setInterval(move, 100);
		}

		function move()
		{
			context.clearRect(0, 0, 400, 300);
			context.save();
			context.fillStyle = 'green';
			context.translate(100, 100);
			context.rotate(i * Math.PI / 45)
			drawLeaf();
			i += 3;
			if (i >= 90) i = 3;
			context.restore();
		}

		function drawLeaf() // 绘制扇叶
		{
			context.save();
			for (var j = 0; j < 4; j++)
			{
				context.rotate(Math.PI / 2);
				context.beginPath();
				context.moveTo(-20, -80);
				context.lineTo(0, -80);
				context.lineTo(0, 0);
				context.lineTo(-30, 0);
				context.closePath();
				context.fill();
			}
			context.restore();
		}
	</script>

</head>

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

	<canvas id="myCanvas" width="200" height="200"
	style="border:3px double #996633;">

	</canvas>

</body>

</html>

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中看到扇叶的旋转动画，如图1所示。

JavaScript图片旋转效果实现方法详解

图1 旋转的扇叶

2．旋转的五角星

将绘制的五角星图案每隔0.1秒后顺时针旋转12°，重新绘制一遍，得到旋转的五角星动画。

编写如下的HTML代码。

<!DOCTYPE html>

<head>

	<title>旋转的五角星</title>

	<script type="text/javascript">
		var context;
		var i;

		function draw(id)
		{
			var canvas = document.getElementById(
				id);
			if (canvas == null)
				return false;
			context = canvas.getContext('2d');
			i = 3;
			setInterval(move, 100);
		}

		function move()
		{
			context.clearRect(0, 0, 400, 300);
			context.save();
			context.fillStyle = 'green';
			context.translate(100, 100);
			context.rotate(i * Math.PI / 45)
			drawStar(80);
			i += 3;
			if (i >= 90) i = 3;
			context.restore();
		}

		function drawStar(r) // 绘制五角星图案
		{
			context.save();
			context.fillStyle = "red";
			context.beginPath();
			context.moveTo(r, 0);
			for (var i = 0; i < 9; i++)
			{
				context.rotate(Math.PI / 5);
				if (i % 2 == 0)
					context.lineTo((r / 2), 0);
				else
					context.lineTo(r, 0);
			}
			context.closePath();
			context.fill();
			context.restore();
		}
	</script>

</head>

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

	<canvas id="myCanvas" width="200" height="200"
	style="border:3px double #996633;">

	</canvas>

</body>

</html>

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中看到五角星的旋转动画，如图2所示。

JavaScript图片旋转效果实现方法详解

图2 旋转的五角星

3．旋转的正六边形漩涡

我们先来画一个正六边形。这样作图，设从起点向绘图方向画一条长为i的线段，将线段的终点设为新的起点，同时绘图方向旋转60°，再画一条长为i+1的线段，重复这样的过程共绘制六条线段，则这六条线段构成一个正六边形。

编写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, 400, 400);
			context.translate(canvas.width / 2,
				canvas.height / 2);
			var colors = ['red', 'yellow',
				'green', 'cyan', 'blue', 'purple'
			];
			for (i = 150; i < 156; i++)
			{
				context.strokeStyle = colors[i % 6];
				context.lineWidth = 2;
				context.beginPath();
				context.moveTo(0, 0);
				context.lineTo(0, i / 2);
				context.stroke();
				context.translate(0, i / 2);
				context.rotate(-60 * (2 * Math.PI /
					360));
			}
		}
	</script>
</head>
<body onload="draw('myCanvas');">
	<canvas id="myCanvas" width="400" height="400"
	style="border:3px double #996633;">
	</canvas>
</body>
</html>

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以在画布中绘制一个正六边形图案，如图3所示。

JavaScript图片旋转效果实现方法详解

图3 一个正六边形

绘制图3的程序中，循环进行了6次，只绘制6条边。若修改“for (i =150; i < 156; i++)”语句为“for (i =150; i < 180; i++)”，使得循环进行30次，则在画布中绘制出如图4所示的图案，该图案有5个六边形围成。若修改语句为“for (i =0; i < 360; i++)”，则在画布中绘制出如图5所示的六边形图案。

JavaScript图片旋转效果实现方法详解

图4 5个六边形围成的图案

JavaScript图片旋转效果实现方法详解

图5 正六边形

生成图5图案的程序中，绘图时旋转的角度为60°，若将旋转角度改成59°，即将语句“context.rotate(-60 * (2 * Math.PI / 360));”修改为“context.rotate(-59 * (2 * Math.PI / 360));”，则在画布中绘制出如图6所示的正六边形漩涡。

JavaScript图片旋转效果实现方法详解

图6 正六边形漩涡

将图6的正六边形漩涡旋转起来。编写如下的HTML文件。

<!DOCTYPE html>

<head>

	<title>旋转的正六边形漩涡</title>

	<script type="text/javascript">
		var context;
		var count;

		function draw(id)
		{
			var canvas = document.getElementById(
				id);
			if (canvas == null)
				return false;
			context = canvas.getContext('2d');
			count = 3;
			setInterval(move, 100);
		}

		function move()
		{
			context.clearRect(0, 0, 400, 400);
			context.save();
			context.translate(200, 200);
			context.rotate(count * Math.PI / 45)
			drawSix();
			count += 3;
			if (count >= 90) count = 3;
			context.restore();
		}

		function drawSix() // 绘制正六边形漩涡图案
		{
			context.save();
			var colors = ['red', 'yellow',
				'green', 'cyan', 'blue', 'purple'
			];
			for (i = 0; i < 360; i++)
			{
				context.strokeStyle = colors[i % 6];
				context.lineWidth = i / 200 + 1;
				context.beginPath();
				context.moveTo(0, 0);
				context.lineTo(0, i / 2);
				context.stroke();
				context.translate(0, i / 2);
				context.rotate(-59 * (2 * Math.PI /
					360));
			}
			context.restore();
		}
	</script>
</head>
<body onload="draw('myCanvas');">
	<canvas id="myCanvas" width="400" height="400"
	style="border:3px double #996633;">
	</canvas>
</body>
</html>

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中看到正六边形漩涡的旋转动画，如图7所示。

图7所示的动画显得有些单调，我们修改上面的程序，使得在绘制正六边形时的旋转角度进行变化，得到不断转呀转的正六边形。

编写的HTML文件内容如下。这个HTML文件的内容与上一个HTML文件内容，修改了两处，为方便读者引用，还是给出完整文件内容。

JavaScript图片旋转效果实现方法详解

图7 正六边形漩涡的旋转动画

<!DOCTYPE html>

<head>

	<title>旋转的正六边形漩涡</title>

	<script type="text/javascript">
		var context;
		var count;

		function draw(id)
		{
			var canvas = document.getElementById(
				id);
			if (canvas == null)
				return false;
			context = canvas.getContext('2d');
			count = 0;
			setInterval(move, 50);
		}

		function move()
		{
			context.clearRect(0, 0, 400, 400);
			context.save();
			context.translate(200, 200);
			context.rotate(count * Math.PI / 45)
			drawSix();
			count++;
			if (count >= 360) count = 0;
			context.restore();
		}

		function drawSix() // 绘制正六边形漩涡图案
		{
			context.save();
			var colors = ['red', 'yellow',
				'green', 'cyan', 'blue', 'purple'
			];
			var rotation = (2 * Math.sin(count /
				(3.14 * 20)));
			for (i = 0; i < 360; i++)
			{
				context.strokeStyle = colors[i % 6];
				context.lineWidth = i / 200 + 1;
				context.beginPath();
				context.moveTo(0, 0);
				context.lineTo(0, i / 2);
				context.stroke();
				context.translate(0, i / 2);
				context.rotate((-60 + rotation) * 2 *
					Math.PI / 360);
			}
			context.restore();
		}
	</script>
</head>
<body onload="draw('myCanvas');">
	<canvas id="myCanvas" width="400" height="400"
	style="border:3px double #996633;">
	</canvas>
</body>
</html>

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中看到一个更加生动的不断转呀转的正六边形漩涡的旋转动画，如图8所示。

JavaScript图片旋转效果实现方法详解

图8 更生动的正六边形漩涡的旋转动画

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

JavaScript图片旋转效果实现方法详解

- Author -

aTeacher

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用JS剩余字数计算的代码
Jul 03 Javascript
JavaScript 对象链式操作测试代码
Apr 25 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
javascript+css实现俄罗斯方块小游戏
Jun 28 #Javascript
详解小程序横屏方案对比
Jun 28 #Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 #Javascript
js模拟实现百度搜索
Jun 28 #Javascript
微信小程序地图实现展示线路
Jul 29 #Javascript
vuex实现购物车的增加减少移除
Jun 28 #Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 #Javascript
条码(1) 目录管理(1) 太阳码(1) Word(2) Get(1) 延时任务(1) Post(1) 二维码(2) 日志(1) openGauss(1)
You might like
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
jquery text()要注意啦
2009/10/30 Javascript
javascript处理table表格的代码
2010/12/06 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
Python计算一个文件里字数的方法
2015/06/15 Python
python黑魔法之参数传递
2016/02/12 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
python实现淘宝秒杀脚本
2020/06/23 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
Python Json数据文件操作原理解析
2020/05/09 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
Html5定位终极解决方案
2020/02/05 HTML / CSS
BookOutlet加拿大：在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
飞利浦美国官网：Philips美国
2020/02/28 全球购物
英语教师岗位职责
2014/03/16 职场文书
幼儿发展评估方案
2014/06/11 职场文书
教师工作态度自我评价
2015/03/05 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL