首页
所有分类
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 相关文章推荐
extJs 下拉框联动实现代码
Apr 09 Javascript
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
javascript表单验证大全
Aug 12 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 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
捷克购物网站(26) 秘鲁购物网站(1) 波兰购物网站(52) 新西兰购物网站(42) 斯洛伐克购物网站(7) 奥地利购物网站(28) 智利购物网站(5) 菲律宾购物网站(13) 卡塔尔购物网站(3) 沙特阿拉伯购物网站(9)
You might like
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
js 函数性能比较方法
2020/08/24 Javascript
Python 操作文件的基本方法总结
2017/08/10 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
python实现百度语音识别api
2018/04/10 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
NumPy 数组使用大全
2019/04/25 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
哪种Python框架适合你？简单介绍几种主流Python框架
2020/08/04 Python
pip install命令安装扩展库整理
2021/03/02 Python
新西兰杂志订阅：isubscribe
2019/08/26 全球购物
国际贸易个人求职信范文
2014/01/04 职场文书
策划总监岗位职责
2014/02/16 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
高校教师岗位职责
2014/03/18 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
暂停营业通知
2015/04/25 职场文书
php远程请求CURL案例（爬虫、保存登录状态）
2021/04/01 PHP
python实现大文本文件分割成多个小文件
2021/04/20 Python
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
Golang 切片(Slice)实现增删改查
2022/04/22 Golang