JavaScript图片旋转的简单示例

感兴趣的小伙伴，下面一起跟随编程之家 jb51.cc的小编来看看吧。


/**
 * 图片旋转
 *
 * @param 
 * @arrange (512.笔记) jb51.cc
 **/
<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);
}
image.src = "http://img1.cache.netease.com/img09/logo/logo_v1.gif";
</script>@H_301_2@

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

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

图片转转转

/**
 * 图片旋转
 *
 * @param 
 * @arrange (512.笔记) jb51.cc
 **/
<style type="text/css">
    html,body {
      margin: 0;
      padding: 0;
    }
</style>

  <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>@H_301_2@
 原文链接：https://www.f2er.com/js/527657.html

JavaScript图片旋转的简单示例

猜你在找的JavaScript相关文章