图片旋转的小例子

<script type="text/javascript">
var c1 = document.getElementById("c1");
	ctx = c1.getContext("2d"),
	image = document.createElement("IMG");
image.onload = function() {
	c1.width = image.height;
	c1.height = image.width;
	ctx.translate(0, image.width);
	ctx.rotate(270*Math.PI/180);
	ctx.drawImage(image, 0, 0);
}
image.src = "http://img1.cache.netease.com/img09/logo/logo_v1.gif";
</script>

IE应该用滤镜实现同样的效果。

rotate()这个函数接收的是弧度值。角度乘以0.017(2π/360)可以转变为弧度。

图片转转转

<!DOCTYPE html>
<html>
<head>
	<title>Demo</title>
	<style type="text/css">
		html, body {
			margin: 0;
			padding: 0;
		}
	</style>
</head>
<body>
	<canvas id="c1"></canvas>
	<script type="text/javascript">
	var image = document.createElement("IMG");
	image.onload = function() { 
		var c1 = document.getElementById("c1"), rotate = null,		
			len = Math.sqrt(Math.pow(image.width, 2) + Math.pow(image.height, 2)),
			center = {x: len / 2, y: len / 2};
		
		//判断是否为IE
		if(/*@cc_on!@*/0) {
			(function() {
				var div = document.createElement("DIV");
				div.style.position = "relative";
				div.style.marginTop = div.style.marginLeft = len / 2 + "px";
				div.appendChild(image);
				c1.parentNode.insertBefore(div, c1);
				c1.parentNode.removeChild(c1);
				c1 = null;
				
				image.style.position = "absolute";
				//设置滤镜
				image.style.filter = "progid:DXImageTransform.Microsoft.Matrix()";				
				var filter = image.filters.item(0);	
				filter.SizingMethod = "auto expand";
				filter.FilterType = "bilinear";	
				
				rotate = function(rad){
					var costheta = Math.cos(rad),
						sintheta = Math.sin(rad);	
					filter.M11 = filter.M22 = costheta;
					filter.M12 = -(filter.M21 = sintheta);
					
					//将图片的重心调节到旋转点。
					image.style.top = (-image.offsetHeight) / 2 + 'px';
					image.style.left = (-image.offsetWidth) / 2 + 'px';	
				}
			})();
		} else {
			(function() {
				var ctx = c1.getContext("2d");						
				rotate = function(rad){			
					c1.width = c1.height = len;
					ctx.translate(center.x, center.y);		
					ctx.rotate(rad);
					
					//绘制图片,并将图片的重心调节到旋转点。
					ctx.drawImage(image, -image.width / 2, -image.height / 2);
				}
			})();
		}		
		
		//开始旋转
		(function() {
			if(rotate) {
				var angle = 0;
				setInterval(function() { 				
					var	rad = ((angle++)*Math.PI / 180) % 360;
					rotate(rad) 
				}, 10);
			}
		})();
	}
	image.src = "http://img1.cache.netease.com/img09/logo/logo_v1.gif";
	</script>
</body>
</html>

点击查看DEMO

图片旋转的小例子》上有2条评论

发表评论