JavaScript をキャンバスと組み合わせて画像回転効果を実現_JavaScript スキル

Weibo では、ユーザーがさまざまな視点から写真の効果を鑑賞できるように、写真を左右などに回転させることができます。この記事では、JavaScript と関連テクノロジを使用して画像の回転効果を実現する方法を例を使用して説明します。 HTML5 の Canvas タグを使用して画像を回転します。HTML5 をサポートしていない IE6、7、8 などのブラウザでは、IE の独自のフィルター効果を使用して画像を回転します。

HTML

ページに画像を配置し、画像の上に 2 つのボタンを配置し、onclick イベントを通じてrotate() 関数を呼び出して、画像が左または右に回転するように制御します。

<div id="tool"> 
   <a href="#" id="arr_left" onclick="rotate('myimg','left')">向左</a> 
   <a href="#" id="arr_right" onclick="rotate('myimg','right')">向右</a> 
</div> 
<div id="img"> 
   <img src="demo.jpg" width="460" height="305" alt="" id="myimg" /> 
</div> 

JavaScript

function rotate(obj,arr){ 
  var img = document.getElementById(obj); 
  if(!img || !arr) return false; 
  var n = img.getAttribute('step'); 
  if(n== null) n=0; 
  if(arr=='left'){ 
    (n==0)? n=3:n--; 
  }else if(arr=='right'){ 
    (n==3)? n=0:n++; 
  } 
  img.setAttribute('step',n); 
  ... 
} 

カスタム関数rotate()を作成しました。この関数のパラメータobjは回転する画像オブジェクトのIDを表し、パラメータarrは回転方向を表し、2つの固定値: left (左へ)と右（右へ）。変数 n を設定して、上、下、左、右の 4 つの回転状態を記録します。回転ボタンをクリックすると、継続的な回転状態が保証されます。つまり、各回転は最後の回転操作に基づいて再度回転されます。

その後、IE ブラウザごとに異なる処理を実行する必要がありますが、IE の古いバージョンとの互換性を保つために、独自のフィルタを使用することをお勧めします。 , この古いナイフに戻らなければなりませんでした。

function rotate(obj,arr){ 
  ... 
  //对IE浏览器使用滤镜旋转 
  if(document.all) { 
    img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')'; 
  // 对现代浏览器写入HTML5的元素进行旋转： canvas 
  }else{ 
    ... 
  } 
} 

コードでは、document.all を使用して IE ブラウザであるかどうかを判断し、IE ブラウザである場合はフィルタを使用します。Firefox や Chrome などの最新のブラウザの場合は、canvas を使用して回転効果を実現します。

function rotate(obj,arr){ 
  ... 
  // 对现代浏览器写入HTML5的元素进行旋转： canvas 
  }else{ 
    var c = document.getElementById('canvas_'+obj); 
    if(c== null){ 
      img.style.visibility = 'hidden'; 
      img.style.position = 'absolute'; 
      c = document.createElement('canvas'); 
      c.setAttribute("id",'canvas_'+obj); 
      img.parentNode.appendChild(c); 
    } 
    var canvasContext = c.getContext('2d'); 
    switch(n) { 
      default : 
      case 0 : 
        c.setAttribute('width', img.width); 
        c.setAttribute('height', img.height); 
        canvasContext.rotate(0 * Math.PI / 180); 
        canvasContext.drawImage(img, 0, 0); 
        break; 
      case 1 : 
        c.setAttribute('width', img.height); 
        c.setAttribute('height', img.width); 
        canvasContext.rotate(90 * Math.PI / 180); 
        canvasContext.drawImage(img, 0, -img.height); 
        break; 
      case 2 : 
        c.setAttribute('width', img.width); 
        c.setAttribute('height', img.height); 
        canvasContext.rotate(180 * Math.PI / 180); 
        canvasContext.drawImage(img, -img.width, -img.height); 
        break; 
      case 3 : 
        c.setAttribute('width', img.height); 
        c.setAttribute('height', img.width); 
        canvasContext.rotate(270 * Math.PI / 180); 
        canvasContext.drawImage(img, -img.width, 0); 
        break; 
    }; 
  } 
} 

コードでは、canvas 要素オブジェクトを作成し、変数 n が異なる状態 (上下左右の方向) にある場合、canvas を使用して画像を再描画します。 。

もちろん、画像の回転効果を実現する別の解決策はあります。それは、HTML5 をバイパスして、別のブラウザーをターゲットにすることです。たとえば、Firefox では、Webkit に -moz-transform:rotform(); を使用できます。 use -webkit-transform:rotate(); ただし、これは html5 の Canvas 実装ほど優れていません。

上記はこの記事で皆さんに共有した内容のすべてです。気に入っていただければ幸いです。