主题:javascript 如何按某个旋转角度显示图片
zcg
[专家分:90] 发布于 2008-10-23 11:26:00
请教大家个问题,在网页中如何按照某个角度显示一张图片,角度是任意度数的,
回复列表 (共1个回复)
沙发
icestar [专家分:0] 发布于 2009-11-25 16:18:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片旋转</title>
<script language="javascript">
var isIE = (document.uniqueID)?1:0;
var i=1;
function rotate(image)
{
var object = image.parentNode;
if(isIE){
image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")";
i++;
if(i>4) {i=1};
}
else{
try{
var canvas = document.createElement('canvas');
if(canvas.getContext("2d")) {
object.replaceChild(canvas,image);
var context = canvas.getContext("2d");
context.translate(176, 0);
context.rotate(Math.PI*0.5);
context.drawImage(image,0,0);
}
}catch(e){}
}
}
</script>
</head>
<body>
<img id="myimg"src="6628_P_1251875354591.jpg" />
<input type="button" value="rotate" onclick="rotate(document.getElementById('myimg'))" />
</body>
</html>
我来回复