<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的图片旋转不平滑。
是这样的，这个例子只是启发性的，不一定非要用这种形式做图片旋转。