HTML5 Canvas如何實現圖片縮放比例

小編給大家分享一下HTML5 Canvas如何實現圖片縮放比例，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

drawImage方法的又一變種是增加了兩個用于控制圖像在canvas中縮放的參數。

drawImage（圖像，x，y，寬度，高度）

其中寬度和高度分別是圖像在畫布中顯示大小。

注意：圖像可能會因為大幅度的縮放而變得起雜點或者模糊。如果您的圖像里面有文字，那么最好還是不要進行縮放，因為那樣處理之后很可能圖像里的文字就會變得無法辨認了。

圖片縮放示例

說明

在這個例子里，我會用一張圖片像背景一樣在畫布上以重復平鋪開來。實現起來也很簡單，只需要循環鋪開通過縮放的圖片即可。見下面的代碼，第一層圖像大小被縮放至原來的擴大，50x38像素。為循環是做行重復，第二層是做列重復的。

注：此例中的各個圖片之間還有一定的間隙，目前還不知道如何去掉。

代碼

< html >

  <頭>

  < meta http-equiv = “ Content-Type” content = “ text / html; charset = utf-8” />    

<！-[如果是IE]>

<script type =“ text / javascript ”  src =“ excanvas.js”> </ script>

<script type =“ text / javascript ”  src =“ excanvas.compiled.js”> </ script>

<！[ endif ]->

<腳本類型= “ text / javascript” > 

函數 draw（）{

   var  ctx =  document.getElementById（'canvas' ）.getContext（'2d' ）;  

  var  img =  new  Image（）;

  img.onload = 函數（）{

   對于 （i = 0; i <4; i ++）{

    對于 （j = 0; j <3; j ++）{

     ctx.drawImage（img，j * 50，i * 38,50,38）;

    }

   }

  }

  img.src = ' ../image/a.jpg  ' ;

}

</腳本>

< title >測試圖像2 </ title >

</頭>

  < body onload = “ draw（）;” >   

      < canvas id = “ canvas”寬度= “ 400” height = “ 300” >   

      < / /帆布>

  </ body >

</ html >

看完了這篇文章，相信你對“HTML5 Canvas如何實現圖片縮放比例”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！