Javascript digabungkan dengan kanvas untuk mencapai kemahiran effect_javascript putaran imej

Di Weibo, kami boleh memutarkan gambar ke kiri, kanan, dsb., supaya pengguna dapat menghargai kesan gambar dari perspektif yang berbeza. Artikel ini akan menggunakan contoh untuk menerangkan kepada anda cara menggunakan Javascript dan teknologi berkaitan untuk mencapai kesan putaran imej. Kami menggunakan teg kanvas HTML5 untuk memutar imej Untuk penyemak imbas seperti IE6, 7 dan 8 yang tidak menyokong HTML5, kami menggunakan kesan penapis unik IE untuk mencapai penggiliran imej.

HTML

Kami meletakkan gambar pada halaman, meletakkan dua butang di atas gambar, dan memanggil fungsi rotate() melalui acara onclick untuk mengawal gambar untuk berputar ke kiri atau kanan.

<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); 
  ... 
} 

Kami menulis fungsi tersuai rotate(), di mana parameter obj mewakili id ​​objek imej yang akan diputar dan parameter arr mewakili arah putaran, dengan dua nilai tetap: kiri (ke kiri) dan kanan (ke kanan). Kami menetapkan pembolehubah n untuk merekodkan empat keadaan putaran atas, bawah, kiri dan kanan Apabila mengklik butang putar, keadaan putaran berterusan boleh dijamin, iaitu, setiap putaran diputar semula berdasarkan operasi putaran terakhir.

Kemudian, kami perlu melakukan pemprosesan yang berbeza mengikut penyemak imbas yang berbeza, anda boleh menggunakan penapis unik mereka untuk mencapai kesan putaran Walaupun kami tidak mengesyorkan menggunakan penapis, agar serasi dengan versi IE yang lebih lama , Kami terpaksa kembali kepada pisau lama ini.

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

Dalam kod, kami menggunakan document.all untuk menentukan sama ada ia adalah pelayar IE, dan jika ya, gunakan penapis Untuk penyemak imbas moden seperti Firefox dan Chrome, kami menggunakan kanvas untuk mencapai kesan putaran.

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; 
    }; 
  } 
} 

Dalam kod, kami mencipta objek elemen kanvas dan menetapkan imej kepada objek kanvas Apabila pembolehubah n berada dalam keadaan berbeza (atas, bawah, kiri dan kanan), kanvas digunakan untuk melukis semula imej. .

Sudah tentu, terdapat satu lagi penyelesaian untuk mencapai kesan putaran imej, iaitu memintas HTML5 dan menyasarkan pelayar yang berbeza Sebagai contoh, di bawah Firefox, anda boleh menggunakan -moz-transform: rotate() untuk webkit gunakan -webkit-transform: rotate (); Tetapi ini tidak sebaik pelaksanaan kanvas html5.

Di atas adalah semua kandungan yang dikongsi dengan anda dalam artikel ini saya harap anda akan menyukainya.