JavaScript图片旋转效果实现方法详解
在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所示。
图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所示。
图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所示。
图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所示的六边形图案。
图4 5个六边形围成的图案
图5 正六边形
生成图5图案的程序中，绘图时旋转的角度为60°，若将旋转角度改成59°，即将语句“context.rotate(-60 * (2 * Math.PI / 360));”修改为“context.rotate(-59 * (2 * Math.PI / 360));”，则在画布中绘制出如图6所示的正六边形漩涡。
图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文件内容，修改了两处，为方便读者引用，还是给出完整文件内容。
图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所示。
图8 更生动的正六边形漩涡的旋转动画
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
特漂亮的JS图片排列旋转效果代码
了下代码,感觉用数组模拟有些僵硬,自己重新写了一个,请大家来pp! body{background:black} .point{position:absolute;height:75px;border:1px silver solid} #round{position:absolute;background:red;width:200px;height:200px;} var r=200,dv=0.01,w=100,x=400;y=100,pn=8 var pi=3.1415926575,d=p
-
基于JS代码实现图片在页面中旋转效果
1.概述 在一些交易平台网站,如淘宝网.拍拍网等,经常会发现一些图片以圈的形状旋转的效果,如此反复的执行. 2.技术要点 主要应用了Math对象的sin(返回数的正弦值)和cos(返回数的余弦值),通过取得正弦值和余弦值然后加一些算法来改变当前层的位置,使图片在页面中旋转. 3.具体实现 (1)本例利用javaScript的Math对象的正弦和余弦值来改变当前层的位置,代码如下: <script language="javascript"> var x1=200; var
-
JS实现3D图片旋转展示效果代码
本文实例讲述了JS实现3D图片旋转展示效果代码.分享给大家供大家参考.具体如下: 这是一段JavaScript代码,围绕成3D模型样式的JavaScript图片旋转展示代码,这里为了演示方便,将图片替换成了数字,预留出了图片的位置,这样速度快些,会HTML的朋友都知道用时候该怎么做.本图片旋转需要手功控制,每点击一下,图片旋转一次,很方便. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-pic-scroll-show-style-c
-
JS实现图片旋转动画效果封装与使用示例
本文实例讲述了JS实现图片旋转动画效果封装与使用.分享给大家供大家参考,具体如下: 核心封装代码如下: //图片动画封装 function SearchAnim(opts) { for(var i in SearchAnim.DEFAULTS) { if (opts[i] === undefined) { opts[i] = SearchAnim.DEFAULTS[i]; } } this.opts = opts; this.timer = null; this.elem = document.
-
原生JS实现逼真的图片3D旋转效果详解
本文实例讲述了原生JS实现逼真的图片3D旋转效果.分享给大家供大家参考,具体如下: 实现效果: 实现过程: 步骤一:先写一个简单的html结构,创建一个box盒子,里面放对应的图片(也可以用js创建图片,这里为了好理解,我们直接用html创建). <body><div class="box"> <img src="./img/1.jpg" alt=""> <img src="./img/2.jp
-
JS实现旋转木马式图片轮播效果
本文实例为大家分享了js图片轮播的具体代码,供大家参考,具体内容如下 主要html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href=
-
用javascript实现旋转图片效果的代码
旋转图片 '); document.write(' '); for (n=0; n '); document.write(' '); document.write(' '); function FollowMouse(){ Xpos = document.body.scrollLeft+event.x+UpDown; Ypos = document.body.scrollTop+event.y+LeftRight; } document.onmousemove = FollowMouse; }
-
纯JS实现旋转图片3D展示效果
CSS: <style type="text/css"> #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute;height:40px;width:60px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}</style> Html: input id="l" type
-
JavaScript图片旋转效果实现方法详解
在Canvas API中,上下文CanvasRenderingContext2D对象提供了一个与坐标旋转相关的方法: void rotate(in float angle); // 按给定的弧度顺时针旋转angle rotate()方法旋转的中心始终是canvas的原点.如果要改变旋转中心,需要使用translate方法. 我们可以将绘制的图形每隔一定的时间间隔后,旋转一定的角度重新绘制一次,这样就可以得到旋转的动画效果. 1．旋转的扇叶 将一个梯形按顺时针旋转90°的方式绘制4次,可以绘制出一
-
JavaScript数据类型的存储方法详解
一个很基础的知识点,JavaScript中基本数据类型和引用数据类型是如何存储的. 由于自己是野生程序员,在刚开始学习程序设计的时候没有在意内存这些基础知识,导致后来在提到"什么什么是存在栈中的,栈中只是存了一个引用"这样的话时总是一脸懵逼.. 后来渐渐的了解了一些内存的知识,这部分还是非常有必要了解的. 基本数据结构 栈 栈,只允许在一段进行插入或者删除操作的线性表,是一种先进后出的数据结构. 堆 堆是基于散列算法的数据结构. 队列 队列是一种先进先出(FIFO)的数据结构. Jav
-
Pyecharts可视化图片渲染的方法详解
使用 pyecharts 渲染成图片一直是开发者比较关心的功能,pyecharts提供了 selenium.phantomjs 和 pyppeteer 三种方式. 更多介绍可以学习官方文档:https://pyecharts.org/#/zh-cn/render_images 首先需要安装上snapshot-selenium pip install snapshot-selenium -i http://pypi.douban.com/simple --trusted-host pypi.dou
-
JavaScript使用Fetch的方法详解
目录 进行 fetch 请求 支持的请求参数 发送带凭据的请求 上传 JSON 数据 上传文件 上传多个文件 检测请求是否成功 自定义请求对象 Headers Guard Response 对象 Body 特性检测 Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应.它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源. 这种功能以前是使用 XMLHttpRequest实现的.Fetch提供了一个更好
-
利用JavaScript构建树形图的方法详解
目录 什么是树形图 浏览JS树形图 创建一个基本的JS树形图 1. 创建一个HTML页面 2. 参考JavaScript文件 3.设置数据 4. 编写一些JS树形图代码 自定义JS树形图 A. 改变颜色 B. 应用线性色标 C. 格式化标签和工具提示 D. 按升序排列图块 树形图可视化广泛用于分层数据分析.如果你没有经验还想创建一个,那将会有些复杂.下面是一个详细教程,教你如何使用JavaScript创建交互式树形图. 宇宙中只有我们吗?我们每个人都曾在某个时候问过自己这个问题.当我们在考虑地球
-
Python OpenCV实现图片预处理的方法详解
目录 一.图片预处理 1.1 边界填充(padding) 1.2 融合图片(mixup) 1.3 图像阈值 二.滤波器 2.1 均值滤波器 2.2 方框滤波器 2.3 高斯滤波器 2.4 中值滤波 2.5 所有滤波器按照上述顺序输出 一.图片预处理 1.1 边界填充(padding) 方法 : cv2.copyMakeBorder BORDER_REPLICATE:复制法,也就是复制最边缘像素. BORDER_REFLECT:反射法,对感兴趣的图像中的像素在两边进行复制例如:fedcba|abc
-
JavaScript数据类型检测实现方法详解
目录 一.typeof 二.instanceof 三.Object.prototype.toString.call() 面试问题 一.typeof 优点:能快速判断基本数据类型,除了 Null: 缺点:不能判别 Object.Array.Null ,都返回 object:判别引用类型除函数显示 function外,其他显示为 object console.log(typeof 55); // number console.log(typeof true); // boolean console.
-
Python去除图片水印实现方法详解
目录 OpenCV介绍 去水印 图片去水印原理 最近写文章遇到图片有水印,如何去除水印呢? 网上找了各种办法,也跑到小红书.抖音等平台找有没有不收费就去水印的网站,但是基本上都是需要VIP会员才可以. 话又说回来这种事情怎么能难倒一个程序员呢?Python的库有这么多肯定有一款适合我吧? 于是找来了OpenCV. OpenCV介绍 文档链接:https://docs.opencv.org/3.0-beta/doc/py_tutorials/py_tutorials.html Opencv(Ope
-
javascript瀑布流布局实现方法详解
本文实例讲述了javascript瀑布流布局实现方法.分享给大家供大家参考,具体如下: html结构: <div id="waterfall"> <div class="mod-box"> <div class="mod-img">...</div> </div> <div class="mod-box"> <div class="mod-
-
Android编程获取图片数据的方法详解
本文实例讲述了Android编程获取图片数据的方法.分享给大家供大家参考,具体如下: 网络的访问在我们日常生活中太重要了,如果没有网络我们的生活将会是什么样子呢?Android手机和浏览器也是一样的,也可以通过网络通讯获取数据,如调用webservice,EJB等.下面就通过一个小例子从网络获取一幅图片并显示在手机上,开发中将会使用到一个新的组件ImageView. 1. 写一个用来处理字节流的工具类 package org.lxh.util; import java.io.ByteArrayO