图片旋转的小例子 -- JavaScript -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> JavaScript --> 图片旋转的小例子

图片旋转的小例子

浏览:2648次出处信息

以下是代码片段：
<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

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：JS中如何判断字符串类型的数字

后一篇：elem.style.left与elem.offsetLeft的区别 >>

文章信息

作者：小寒来源：记事本
标签：图片旋转
发布时间：2010-08-05 10:00:54

建议继续学习

近3天十大热文