首页
所有分类
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页面跳转常用的几种方式
Nov 25 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
sails框架的学习指南
Dec 22 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
vue组件之间的数据传递方法详解
Apr 19 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
使用vue实现通过变量动态拼接url
Jul 22 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 Javascript
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) limit(1) Mysql报错(1) mysql.user(1) 逻辑架构(1) MYSQL函数(1) 计时器(1) turtle(1) offset(1) 定时任务(2)
You might like
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
JavaScript DOM基础
2015/04/13 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
Angularjs手动解析表达式（$parse）
2016/10/12 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
AI小程序之语音听写来了，十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
python人民币小写转大写辅助工具
2018/06/20 Python
wxpython绘制音频效果
2019/11/18 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
全球最大的游戏市场：G2A
2018/07/05 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
特岗教师个人总结
2015/02/10 职场文书
工作时间证明
2015/06/15 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
教师旷工检讨书
2015/08/15 职场文书
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL