<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function ()
{
var oimg = document.getElementById('img1');
var ainput = document.getElementsByTagName('input');
var inum = 0;
var yimg = new Image();
yimg.onload = function ()
{
draw(oimg);
}
yimg.src = oimg.src;
function draw(obj)
{
var oc = document.createElement('canvas');
var ogc = oc.getContext('2d');
oc.width = obj.width;
oc.height = obj.height;
obj.parentNode.replaceChild(oc,obj);
ogc.drawImage(obj,0,0);
ainput[1].onclick = function ()
{
if(inum == 3)
{
inum = 0;
}
else
{
inum ++;
}
tochange();
}
ainput[0].onclick = function ()
{
if(inum == 0)
{
inum = 3;
}
else
{
inum --;
}
tochange();
}
function tochange()
{
switch(inum)
{
case 1:
oc.width = obj.height;
oc.height = obj.width;
ogc.rotate(90*Math.PI/180);
ogc.drawImage(obj,0,-obj.height)
break;
case 2:
oc.width = obj.width;
oc.height = obj.height;
ogc.rotate(180*Math.PI/180);
ogc.drawImage(obj,-obj.width,-obj.height)
break;
case 3:
oc.width = obj.height;
oc.height = obj.width;
ogc.rotate(270*Math.PI/180);
ogc.drawImage(obj,-obj.width,0)
break;
case 0:
oc.width = obj.width;
oc.height = obj.height;
ogc.rotate(0);
ogc.drawImage(obj,0,0)
break;
}
}
}
}
</script>
<style>
body{
background:pink;
}
#c1{
background:white;
}
</style>
</head>
<body>
<input type="button" value="←"/>
<input type="button" value="→"/>
<div>
<img id="img1" src="img/5-5.jpg">
</div>
</body>
</html>
