技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> 图片旋转的小例子

图片旋转的小例子

浏览:2645次  出处信息

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

建议继续学习:

  1. 图片动态局部毛玻璃模糊效果的实现    (阅读:13591)
  2. 淘宝图片存储架构    (阅读:9836)
  3. 解决IE6从Nginx服务器下载图片不Cache的Bug    (阅读:7097)
  4. When we`re only No.2, we try harder之聊天表情设计小探讨    (阅读:6507)
  5. 精于图片处理的10款jQuery插件    (阅读:6219)
  6. phpThumb:强大的缩微图类    (阅读:5460)
  7. 贴着另一枚硬币旋转一周则自身转了两周:不同的解释方法    (阅读:5447)
  8. js实现预加载图片让图片快速显示    (阅读:4962)
  9. 利用开源的Gearman框架构建分布式图片处理平台[原创]    (阅读:4259)
  10. 使用数据库存放图片    (阅读:4187)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1