html5 图片360旋转
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片360度旋转</title>
<style>
input {
font-size:18px;
padding:5px 20px 5px 20px;
font-weight:bold;
color:white;
background-color:#c5464a;
cursor:pointer;
border:none;
outline:none;
border-radius:7px 7px 7px 7px;
} </style>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<input type="button" value="←">
<input type="button" value="→">
<div id="mydiv">
<img src="img3.jpg" id="img">
</div>
</body>
</html>
test.js
window.onload = function() {
var inputval = document.getElementsByTagName('input');
var imgval = document.getElementById('img');
var yimg = new Image();
var iNow = 0;
yimg.onload = function() {
draw(imgval);
} yimg.src = imgval.src; function draw(obj) {
var c = document.createElement('canvas');
var cxt = c.getContext('2d'); c.width = obj.width;
c.height = obj.height; obj.parentNode.replaceChild(c, obj); cxt.drawImage(obj, 0, 0); inputval[1].onclick = function() {
if (iNow == 3) {
iNow = 0;
} else {
iNow++;
}
toChange();
}; inputval[0].onclick = function() {
if (iNow == 0) {
iNow = 3;
} else {
iNow--;
}
toChange();
}; function toChange() {
switch (iNow) {
case 0:
c.width = obj.width;
c.height = obj.height;
cxt.rotate(0 * Math.PI / 180);
cxt.drawImage(obj, 0, 0);
break;
case 1:
c.width = obj.height;
c.height = obj.width;
cxt.rotate(90 * Math.PI / 180);
cxt.drawImage(obj, 0, -obj.height);
break;
case 2:
c.width = obj.width;
c.height = obj.height;
cxt.rotate(180 * Math.PI / 180);
cxt.drawImage(obj, -obj.width, -obj.height);
break;
case 3:
c.width = obj.height;
c.height = obj.width;
cxt.rotate(270 * Math.PI / 180);
cxt.drawImage(obj, -obj.width, 0);
break;
case 4:
c.width = obj.width;
c.height = obj.height;
cxt.rotate(360 * Math.PI / 180);
cxt.drawImage(obj, obj.width, obj.height);
break;
}
}
}
}
图片:
效果:
2017-09-08 23:03:47
html5 图片360旋转的更多相关文章
- CSS3动画旋转——(图片360°旋转)
今天在重构网页特效的时候,想着用到一个css3的旋转特效.简单来一个demo. html <div class="box"> <img src="./y ...
- HTML5图片旋转
HTML5图片旋转 首先我们使用Cococs2dx-Js-Lite版,来创建一个工程,我们所需要的开发环境如下: 1,webstrom 2,google chrome浏览器 3,cocos2dx-Js ...
- 分享10款效果惊艳的HTML5图片特效
在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家. 1.HTML5 3D正方体旋转动画 很酷的3D特 ...
- 分享10款效果惊艳的HTML5图片特效【转】
先插入一条广告,博主新开了一家淘宝店,经营自己纯手工做的发饰,新店开业,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!店名: 小鱼尼莫手工饰品店经营: 发饰.头花.发夹.耳环等(手工制作)网店: ...
- 13 款最棒的 jQuery 图像 360° 旋转插件
在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者文章.jQuery 图像旋转插件可以让用 ...
- 通过CSS3实现:鼠标悬停图片360度旋转效果
效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转 鼠标离开图片:图片260度逆时针旋转 只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...
- css3相册图片3D旋转展示特效
查看效果:http://hovertree.com/texiao/css/14/ 本效果用css3的animation实现动画 定义和用法animation 属性是一个简写属性,用于设置六个动画属性: ...
- 网页特效:用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- windows phone 摄像头得到图片是旋转90°
我上个随笔讲到,windows phone 拍出来的photo如果直接使用是反转了90°的. 研究了很久..终于发现问题.其实..这是使用习惯问题... CameraCaptureUI 得到的phot ...
随机推荐
- Appium解决native+webview混合型APP(公众号、小程序)切换webview后元素无法定位问题
问题:最近在做一个安卓+H5混合开发的APP自动化测试,发现在从native切换到webview后,元素仍然无法找到,报错:no such element 思路:于是思考webview会不会像web页 ...
- PHPExcel 之常用功能
PHPExcel基本操作: 定义EXCEL实体 即定义一个PHPEXCEL对象,并设置EXCEL对象内显示内容 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...
- GCD 和 NSOperationQueue 的差别
http://stackoverflow.com/questions/10373331/nsoperation-vs-grand-central-dispatch http://www.cocoach ...
- drawRect
1) 画笔设置 Paint.Style.STROKE 中空模式 paint = new Paint(); //新建一个画笔对象 paint.setAntiAlias(true);//抗锯齿功能 pai ...
- PHP常用工具函数之手机号相关
1.手机号正确与否判定 //测试手机号 $phone = '17777777777'; $pattern = '/^1[356789]\d{9}$/'; $is = preg_match($patte ...
- python杂谈
1.for循环过界保护 例如: a=len([1,2,3]) for i in range(a): for j in range(i+1:a) print(i,j) 不会报错 2.python集合和列 ...
- Warning: Cannot modify header information原因及解决方案
相信大多数人在写PHP代码的时候,都遇到过类似"Warning: Cannot send session cookie – headers already sent…“或者”Cannot a ...
- [Linux] 009 链接命令
链接命令:ln 命令名称:ln 命令英文原意:link 命令所在路径:/bin/ln 执行权限:所有用户 语法:ln -s [原文件] [目标文件] 功能描述:生成链接文件 范例: 创建文件 /etc ...
- webpack的code spliting与chunks
webpack的code spliting与chunks :https://blog.csdn.net/liuqi332922337/article/details/53020992
- weBDrriver API接口方法小记
3.2.1 输入框(text field or textarea) 找到输入框元素:WebElement element = driver.findElement(By.id("passwd ...