首页
所有分类
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 相关文章推荐
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
Javascript实现单例模式
Jan 24 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 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
WeUI(1) 蒙特卡罗(1) 微信小程序(9) 指针(1) 结构体(1) Pillow(2) map(4) vue-esign(1) bufio(1) pdfkit(1)
You might like
Php获取金书网的书名的实现代码
2010/06/11 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
PHP数据库操作三：redis用法分析
2017/08/16 PHP
PHP实现验证码校验功能
2017/11/16 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
轻轻松松学JS调试（不下载任何工具）
2010/04/14 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
webpack入门必知必会
2017/01/16 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
Python中bisect的使用方法
2019/12/31 Python
Python devel安装失败问题解决方案
2020/06/09 Python
微软中国官方旗舰店：销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
资深地理教师自我评价
2013/09/21 职场文书
写得不错的求职信范文
2014/07/11 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
入党函调证明材料
2015/06/19 职场文书
任命书格式模板
2015/09/22 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
浅谈Redis中的RDB快照
2021/06/29 Redis
Python jiaba库的使用详解
2021/11/23 Python